Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Launch demo modal

<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
<modal id="modal-demo" title="Modal title">
=== Text in a modal ===
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. [...]

Modals have two optional sizes, available via size attribute.

Large modal Small modal

<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>
<modal id="modal-large" size="lg" title="Large modal">...</modal>
<modal id="modal-small" size="sm" title="Small modal">...</modal>

For modals that simply appear rather than fade in to view, set to false the fade attribute.

No fade animation

<btn type="primary" modal="modal-no-fade">No fade animation</btn>
<modal id="modal-no-fade" fade="false" title="No fade animation">...</modal>

Use remote attribute to display DokuWiki pages inside a modal window.

Welcome to DokuWiki!

<btn type="primary" modal="modal-remote">Welcome to DokuWiki!</btn>
<modal id="modal-remote" remote=":wiki:welcome"></modal>

Name Default Values Description
backdrop true true false static Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard true true false Closes the modal when escape key is pressed
show false true false Shows the modal when initialized
fade false true false Enable the fade animation
dismiss true true false Display a dismiss button
size NULL sm lg Modal size with
id NULL Modal ID (see Buttons)
title NULL Modal title
remote NULL Display DokuWiki pages inside a Modal window
  • wiki/plugin/bootswrapper/modal.txt
  • Last modified: 8 years ago
  • by Giuseppe Di Terlizzi