Modal

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

Examples

Live Demo

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. [...]
</modal>


Optional sizes

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>


Remove animation

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>


Remote

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

DokuWiki! 


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


Options

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 button)
title NULL Modal title
remote NULL Display DokuWiki pages inside a Modal window