1====== Modal ======
2
3Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
4
5
6===== Examples =====
7
8==== Live Demo ====
9
10<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
11
12<modal id="modal-demo" title="Modal title">
13=== Text in a modal ===
14
15Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
16
17=== Popover in a modal ===
18
19This <popover title="A Title" content="And here's some amazing content. It's very engaging. right?"><btn type="default">button</btn></popover> should trigger a popover on click.
20
21=== Tooltips in a modal ===
22
23This <tooltip title="Tooltip">[[modal|link]]</tooltip> and that <tooltip title="Tooltip">[[modal|link]]</tooltip> should have tooltips on hover.
24
25=== Overflowing text to show scroll behavior ===
26
27Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
28
29Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
30
31Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
32
33Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
34
35Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
36
37Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
38
39Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
40
41Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
42
43Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
44</modal>
45
46\\
47
48<code html5>
49<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
50
51<modal id="modal-demo" title="Modal title">
52=== Text in a modal ===
53
54Duis mollis, est non commodo luctus, nisi erat porttitor ligula. [...]
55</modal>
56</code>
57
58\\
59
60==== Optional sizes ====
61
62Modals have two optional sizes, available via ''size'' attribute.
63
64<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>
65
66<modal id="modal-large" size="lg" title="Large modal">...</modal>
67<modal id="modal-small" size="sm" title="Small modal">...</modal>
68
69\\
70
71<code html5>
72<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>
73
74<modal id="modal-large" size="lg" title="Large modal">...</modal>
75<modal id="modal-small" size="sm" title="Small modal">...</modal>
76</code>
77
78\\
79
80===== Remove animation =====
81
82For modals that simply appear rather than fade in to view, set to ''false'' the ''fade'' attribute.
83
84<btn type="primary" modal="modal-no-fade">No fade animation</btn>
85
86<modal id="modal-no-fade" fade="false" title="No fade animation">...</modal>
87
88
89\\
90
91<code html5>
92<btn type="primary" modal="modal-no-fade">No fade animation</btn>
93
94<modal id="modal-no-fade" fade="false" title="No fade animation">...</modal>
95</code>
96
97\\
98
99===== Remote =====
100
101Use ''remote'' attribute to display DokuWiki pages inside a modal window.
102
103<btn type="primary" modal="modal-remote">Welcome to DokuWiki!</btn>
104
105<modal id="modal-remote" remote=":wiki:welcome"></modal>
106
107\\
108
109<code html5>
110<btn type="primary" modal="modal-remote">Welcome to DokuWiki!</btn>
111
112<modal id="modal-remote" remote=":wiki:welcome"></modal>
113</code>
114
115\\
116
117===== Options =====
118
119<datatable info="false" paging="false" searching="true">
120^ Name ^ Default ^ Values ^ Description ^
121| ''backdrop'' | ''true'' | ''true'' ''false'' ''static'' | Includes a modal-backdrop element. Alternatively, specify ''static'' for a backdrop which doesn't close the modal on click. |
122| ''keyboard'' | ''true'' | ''true'' ''false'' | Closes the modal when escape key is pressed |
123| ''show'' | ''false'' | ''true'' ''false'' | Shows the modal when initialized |
124| ''fade'' | ''false'' | ''true'' ''false'' | Enable the fade animation |
125| ''dismiss'' | ''true'' | ''true'' ''false'' | Display a dismiss button |
126| ''size'' | NULL | ''sm'' ''lg'' | Modal size with |
127| ''id''   | NULL | | Modal ID (see [[button]]) |
128| ''title'' | NULL | | Modal title |
129| ''remote'' | NULL | | Display DokuWiki pages inside a Modal window |
130</datatable>