uim.bootstrap.bs5.demos.components.modals source code

1 module uim.bootstrap.bs5.demos.components.modals;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/components/modals", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Modals - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto staticExample = demoBs5Example("static", "Static",  
20   H5Div(
21     BS5Modal("modalStatic", ["fade show"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalStaticTitle", "aria-modal":"true", "style":"display: block; position: relative; z-index: 1;"], 
22       BS5ModalDialog(["role":"document"], 
23         BS5ModalContent(
24           BS5ModalHeader(
25             BS5ModalTitle(["id":"modalStaticTitle"], "Modal title"),
26             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"]))),
27           BS5ModalBody(
28             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
29           BS5ModalFooter(
30             BS5Button(["btn-primary"], "Action"),
31             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))
32   ), 
33   `BS5Modal("modalStatic", ["fade show"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalStaticTitle", "aria-modal":"true", "style":"display: block; position: relative; z-index: 1;"], 
34   BS5ModalDialog(["role":"document"], 
35     BS5ModalContent(
36       BS5ModalHeader(
37         BS5ModalTitle(["id":"modalStaticTitle"], "Modal title"),
38         BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"]))),
39       BS5ModalBody(
40         H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
41       BS5ModalFooter(
42         BS5Button(["btn-primary"], "Action"),
43         BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))`, 
44           `H5Div(["modal fade show" id="modalStatic" tabindex="-1" role="dialog" aria-labelledby="modalStaticTitle" aria-modal="true" "style":"display: block; position: relative; z-index: 1;"]
45   H5Div(["modal-dialog" role="document"]
46     H5Div(["modal-content"]
47       H5Div(["modal-header"]
48         <h5 ["modal-title" id="modalStaticTitle"]Modal title</h5>
49         H5Button(["type":"button" ["btn-close" data-dismiss="modal" "aria-label":"Close"]")
50       )
51       H5Div(["modal-body"]
52         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")
53       )
54       H5Div(["modal-footer"]
55         H5Button(["type":"button" ["btn btn-primary"]Action")
56         H5Button(["type":"button" ["btn btn-secondary" data-dismiss="modal"]Close")
57       )
58     )
59   )
60 )`);
61 
62 auto headerExample = demoBs5Example("header", "Header only",  
63   H5Div(
64     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalHeader"], "Open modal"),
65     BS5Modal("modalHeader", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalHeaderTitle", "aria-hidden":"true"], 
66       BS5ModalDialog(
67         BS5ModalContent(
68           BS5ModalHeader(
69             BS5ModalTitle(["id":"modalHeaderTitle"], "Modal title"),
70             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
71           BS5ModalBody(
72             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")))))
73   ), 
74 `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalHeader"], "Open modal"),
75   BS5Modal("modalHeader", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalHeaderTitle", "aria-hidden":"true"], 
76     BS5ModalDialog(
77       BS5ModalContent(
78         BS5ModalHeader(
79           BS5ModalTitle(["id":"modalHeaderTitle"], "Modal title"),
80           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
81         BS5ModalBody(
82           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")))))`, ``);
83 
84 auto footerExample = demoBs5Example("headerfooter", "Header and footer",  
85   H5Div(
86     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalHeaderFooter"], "Open modal"),
87     BS5Modal("modalHeaderFooter", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalHeaderFooterTitle", "aria-hidden":"true"],
88       BS5ModalDialog( 
89         BS5ModalContent(
90           BS5ModalHeader(
91             BS5ModalTitle("modalHeaderFooterTitle", "Modal title"),
92             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
93           BS5ModalBody(
94             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
95           BS5ModalFooter(
96             BS5Button(["btn-primary"], "Action"),
97             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
98   ), 
99   `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalHeaderFooter"], "Open modal"),
100   BS5Modal("modalHeaderFooter", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalHeaderFooterTitle", "aria-hidden":"true"],
101     BS5ModalDialog( 
102       BS5ModalContent(
103         BS5ModalHeader(
104           BS5ModalTitle("modalHeaderFooterTitle", "Modal title"),
105           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
106         BS5ModalBody(
107           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
108         BS5ModalFooter(
109           BS5Button(["btn-primary"], "Action"),
110           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, ``);
111 
112 auto longExample = demoBs5Example("scrollablecontent", "Long scrollable content",  
113   H5Div(
114     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalLong"], "Open modal"),
115     BS5Modal("modalLong", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalLongTitle", "aria-hidden":"true"], 
116       BS5ModalDialog(
117         BS5ModalContent(
118           BS5ModalHeader(
119             BS5ModalTitle("modalLongTitle", "Modal title"),
120             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
121           BS5ModalBody(
122             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 
123             Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."),
124             H5P("Pellentesque vitae convallis magna. Morbi non elementum mi. Suspendisse at mollis arcu, eu tempus tellus. 
125             Aenean fringilla eleifend nisl. Aliquam erat volutpat. Sed a tortor quis tortor convallis mattis. Nunc congue massa vitae lectus dictum, a mattis metus dignissim."),
126             H5P("Nulla feugiat, lorem sit amet vehicula hendrerit, velit eros pellentesque est, at dictum elit risus id diam. 
127             In ante lorem, blandit vel dui in, sagittis laoreet erat. Proin dictum sit amet urna ut placerat. Pellentesque laoreet, dolor vitae facilisis feugiat, quam quam gravida elit, nec sagittis orci metus at leo. In scelerisque felis vel neque lobortis ullamcorper. Praesent quis sagittis neque, nec eleifend neque. Suspendisse at consectetur eros. Mauris lectus libero, molestie vel dapibus sit amet, luctus gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero neque, pretium quis malesuada eget, congue ac mauris."),
128             H5P("Aenean quis tristique libero. Vestibulum sagittis, sapien gravida lobortis posuere, diam arcu auctor libero, at tempor mauris nulla vel odio. Phasellus semper eros rutrum mi scelerisque interdum. 
129             Maecenas euismod est sit amet justo vestibulum bibendum. Etiam scelerisque sodales nisi nec efficitur. Pellentesque arcu mauris, accumsan eget mollis at, ultrices id ante. Duis in mi eget nisi euismod gravida. Cras pharetra sollicitudin elit, vel eleifend felis dignissim non. Integer leo ex, feugiat eu lorem egestas, mollis suscipit nulla. Duis quis tellus nulla. Maecenas risus ipsum, fringilla at orci sit amet, mattis fringilla orci. Vivamus odio tellus, ornare eu leo id, pellentesque sodales ante."),
130             H5P("Sed laoreet ut ligula eget fringilla. Suspendisse dapibus dui at ex dictum hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi efficitur ac purus eget dignissim. 
131             Aliquam ultrices, orci finibus sollicitudin tempus, elit metus scelerisque magna, a rhoncus justo nisl vitae lectus. Nam mollis sed est ut ullamcorper. Curabitur consequat feugiat erat quis molestie. Fusce suscipit sem et nulla dignissim, id malesuada felis laoreet. Cras leo ligula, vulputate id mi ac, gravida porta sem. Mauris ullamcorper lectus ac eleifend elementum. Ut id velit consequat, facilisis leo vitae, volutpat nisi. Nunc hendrerit libero mi. Integer scelerisque mattis neque placerat condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu odio mi. Duis interdum vulputate turpis pretium congue.")),          
132           BS5ModalFooter(
133             BS5Button(["btn-primary"], "Action"),
134             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
135   ), `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalLong"], "Open modal"),
136   BS5Modal("modalLong", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalLongTitle", "aria-hidden":"true"], 
137     BS5ModalDialog(
138       BS5ModalContent(
139         BS5ModalHeader(
140           BS5ModalTitle("modalLongTitle", "Modal title"),
141           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
142         BS5ModalBody(
143           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 
144           Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."),
145           H5P("Pellentesque vitae convallis magna. Morbi non elementum mi. Suspendisse at mollis arcu, eu tempus tellus. 
146           Aenean fringilla eleifend nisl. Aliquam erat volutpat. Sed a tortor quis tortor convallis mattis. Nunc congue massa vitae lectus dictum, a mattis metus dignissim."),
147           H5P("Nulla feugiat, lorem sit amet vehicula hendrerit, velit eros pellentesque est, at dictum elit risus id diam. 
148           In ante lorem, blandit vel dui in, sagittis laoreet erat. Proin dictum sit amet urna ut placerat. Pellentesque laoreet, dolor vitae facilisis feugiat, quam quam gravida elit, nec sagittis orci metus at leo. In scelerisque felis vel neque lobortis ullamcorper. Praesent quis sagittis neque, nec eleifend neque. Suspendisse at consectetur eros. Mauris lectus libero, molestie vel dapibus sit amet, luctus gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero neque, pretium quis malesuada eget, congue ac mauris."),
149           H5P("Aenean quis tristique libero. Vestibulum sagittis, sapien gravida lobortis posuere, diam arcu auctor libero, at tempor mauris nulla vel odio. Phasellus semper eros rutrum mi scelerisque interdum. 
150           Maecenas euismod est sit amet justo vestibulum bibendum. Etiam scelerisque sodales nisi nec efficitur. Pellentesque arcu mauris, accumsan eget mollis at, ultrices id ante. Duis in mi eget nisi euismod gravida. Cras pharetra sollicitudin elit, vel eleifend felis dignissim non. Integer leo ex, feugiat eu lorem egestas, mollis suscipit nulla. Duis quis tellus nulla. Maecenas risus ipsum, fringilla at orci sit amet, mattis fringilla orci. Vivamus odio tellus, ornare eu leo id, pellentesque sodales ante."),
151           H5P("Sed laoreet ut ligula eget fringilla. Suspendisse dapibus dui at ex dictum hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi efficitur ac purus eget dignissim. 
152           Aliquam ultrices, orci finibus sollicitudin tempus, elit metus scelerisque magna, a rhoncus justo nisl vitae lectus. Nam mollis sed est ut ullamcorper. Curabitur consequat feugiat erat quis molestie. Fusce suscipit sem et nulla dignissim, id malesuada felis laoreet. Cras leo ligula, vulputate id mi ac, gravida porta sem. Mauris ullamcorper lectus ac eleifend elementum. Ut id velit consequat, facilisis leo vitae, volutpat nisi. Nunc hendrerit libero mi. Integer scelerisque mattis neque placerat condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu odio mi. Duis interdum vulputate turpis pretium congue.")),          
153         BS5ModalFooter(
154           BS5Button(["btn-primary"], "Action"),
155           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, 
156           ``);
157 
158 auto scrollableExample = demoBs5Example("scrollablebody", "Scrollable body",  
159   H5Div(
160     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalScrollableBody"], "Open modal"),
161     BS5Modal("modalScrollableBody", ["fade"], ["tabindex":"-1", "aria-labelledby":"modalScrollableBodyTitle", "aria-hidden":"true"], 
162       BS5ModalDialog("modal-dialog-scrollable", 
163         BS5ModalContent(
164           BS5ModalHeader(
165             BS5ModalTitle("modalScrollableBodyTitle", "Modal title"),
166             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
167           BS5ModalBody( 
168             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."),
169             H5P("Pellentesque vitae convallis magna. Morbi non elementum mi. Suspendisse at mollis arcu, eu tempus tellus. Aenean fringilla eleifend nisl. Aliquam erat volutpat. Sed a tortor quis tortor convallis mattis. Nunc congue massa vitae lectus dictum, a mattis metus dignissim."),
170             H5P("Nulla feugiat, lorem sit amet vehicula hendrerit, velit eros pellentesque est, at dictum elit risus id diam. In ante lorem, blandit vel dui in, sagittis laoreet erat. Proin dictum sit amet urna ut placerat. Pellentesque laoreet, dolor vitae facilisis feugiat, quam quam gravida elit, nec sagittis orci metus at leo. In scelerisque felis vel neque lobortis ullamcorper. Praesent quis sagittis neque, nec eleifend neque. Suspendisse at consectetur eros. Mauris lectus libero, molestie vel dapibus sit amet, luctus gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero neque, pretium quis malesuada eget, congue ac mauris."),
171             H5P("Aenean quis tristique libero. Vestibulum sagittis, sapien gravida lobortis posuere, diam arcu auctor libero, at tempor mauris nulla vel odio. Phasellus semper eros rutrum mi scelerisque interdum. Maecenas euismod est sit amet justo vestibulum bibendum. Etiam scelerisque sodales nisi nec efficitur. Pellentesque arcu mauris, accumsan eget mollis at, ultrices id ante. Duis in mi eget nisi euismod gravida. Cras pharetra sollicitudin elit, vel eleifend felis dignissim non. Integer leo ex, feugiat eu lorem egestas, mollis suscipit nulla. Duis quis tellus nulla. Maecenas risus ipsum, fringilla at orci sit amet, mattis fringilla orci. Vivamus odio tellus, ornare eu leo id, pellentesque sodales ante."),
172             H5P("Sed laoreet ut ligula eget fringilla. Suspendisse dapibus dui at ex dictum hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi efficitur ac purus eget dignissim. Aliquam ultrices, orci finibus sollicitudin tempus, elit metus scelerisque magna, a rhoncus justo nisl vitae lectus. Nam mollis sed est ut ullamcorper. Curabitur consequat feugiat erat quis molestie. Fusce suscipit sem et nulla dignissim, id malesuada felis laoreet. Cras leo ligula, vulputate id mi ac, gravida porta sem. Mauris ullamcorper lectus ac eleifend elementum. Ut id velit consequat, facilisis leo vitae, volutpat nisi. Nunc hendrerit libero mi. Integer scelerisque mattis neque placerat condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu odio mi. Duis interdum vulputate turpis pretium congue.")),
173           BS5ModalFooter(
174             BS5Button(["btn-primary"], "Action"),
175             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
176   ), 
177   `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalScrollableBody"], "Open modal"),
178   BS5Modal("modalScrollableBody", ["fade"], ["tabindex":"-1", "aria-labelledby":"modalScrollableBodyTitle", "aria-hidden":"true"], 
179     BS5ModalDialog("modal-dialog-scrollable", 
180       BS5ModalContent(
181         BS5ModalHeader(
182           BS5ModalTitle("modalScrollableBodyTitle", "Modal title"),
183           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
184         BS5ModalBody( 
185           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."),
186           H5P("Pellentesque vitae convallis magna. Morbi non elementum mi. Suspendisse at mollis arcu, eu tempus tellus. Aenean fringilla eleifend nisl. Aliquam erat volutpat. Sed a tortor quis tortor convallis mattis. Nunc congue massa vitae lectus dictum, a mattis metus dignissim."),
187           H5P("Nulla feugiat, lorem sit amet vehicula hendrerit, velit eros pellentesque est, at dictum elit risus id diam. In ante lorem, blandit vel dui in, sagittis laoreet erat. Proin dictum sit amet urna ut placerat. Pellentesque laoreet, dolor vitae facilisis feugiat, quam quam gravida elit, nec sagittis orci metus at leo. In scelerisque felis vel neque lobortis ullamcorper. Praesent quis sagittis neque, nec eleifend neque. Suspendisse at consectetur eros. Mauris lectus libero, molestie vel dapibus sit amet, luctus gravida ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero neque, pretium quis malesuada eget, congue ac mauris."),
188           H5P("Aenean quis tristique libero. Vestibulum sagittis, sapien gravida lobortis posuere, diam arcu auctor libero, at tempor mauris nulla vel odio. Phasellus semper eros rutrum mi scelerisque interdum. Maecenas euismod est sit amet justo vestibulum bibendum. Etiam scelerisque sodales nisi nec efficitur. Pellentesque arcu mauris, accumsan eget mollis at, ultrices id ante. Duis in mi eget nisi euismod gravida. Cras pharetra sollicitudin elit, vel eleifend felis dignissim non. Integer leo ex, feugiat eu lorem egestas, mollis suscipit nulla. Duis quis tellus nulla. Maecenas risus ipsum, fringilla at orci sit amet, mattis fringilla orci. Vivamus odio tellus, ornare eu leo id, pellentesque sodales ante."),
189           H5P("Sed laoreet ut ligula eget fringilla. Suspendisse dapibus dui at ex dictum hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi efficitur ac purus eget dignissim. Aliquam ultrices, orci finibus sollicitudin tempus, elit metus scelerisque magna, a rhoncus justo nisl vitae lectus. Nam mollis sed est ut ullamcorper. Curabitur consequat feugiat erat quis molestie. Fusce suscipit sem et nulla dignissim, id malesuada felis laoreet. Cras leo ligula, vulputate id mi ac, gravida porta sem. Mauris ullamcorper lectus ac eleifend elementum. Ut id velit consequat, facilisis leo vitae, volutpat nisi. Nunc hendrerit libero mi. Integer scelerisque mattis neque placerat condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu odio mi. Duis interdum vulputate turpis pretium congue.")),
190         BS5ModalFooter(
191           BS5Button(["btn-primary"], "Action"),
192           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, 
193   ``);
194 
195 auto verticallyExample = demoBs5Example("vertically", "Vertically centered",  
196   H5Div(
197     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalVertical"], "Open modal"),
198     BS5Modal("modalVertical", ["fade"], ["tabindex":"-1", "aria-labelledby":"modalVerticalTitle", "aria-hidden":"true"], 
199       BS5ModalDialog(["modal-dialog-centered"], 
200         BS5ModalContent(
201           BS5ModalHeader(
202             BS5ModalTitle("modalVerticalTitle", "Modal title"),
203             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
204           BS5ModalBody(
205             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
206           BS5ModalFooter(
207             BS5Button(["btn-primary"], "Action"),
208             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
209   ), 
210   `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalVertical"], "Open modal"),
211   BS5Modal("modalVertical", ["fade"], ["tabindex":"-1", "aria-labelledby":"modalVerticalTitle", "aria-hidden":"true"], 
212     BS5ModalDialog(["modal-dialog-centered"], 
213       BS5ModalContent(
214         BS5ModalHeader(
215           BS5ModalTitle("modalVerticalTitle", "Modal title"),
216           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
217         BS5ModalBody(
218           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
219         BS5ModalFooter(
220           BS5Button(["btn-primary"], "Action"),
221           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, 
222   ``);
223 
224 auto sizingExample = demoBs5Example("sizing", "Sizing",  
225   H5Div(
226     H5H5(["text-muted", "mt-3"], "Small"),
227     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalSmall"], "Open modal"),
228     BS5Modal("modalSmall", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalSmallTitle", "aria-hidden":"true"], 
229       BS5ModalDialog(["modal-sm"], 
230         BS5ModalContent(
231           BS5ModalHeader(
232             BS5ModalTitle("modalSmallTitle", "Modal title"),
233             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
234           BS5ModalBody(
235             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
236           BS5ModalFooter(
237             BS5Button(["btn-primary"], "Action"),
238             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
239     H5H5(["text-muted", "mt-3"], "Medium"),
240     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalMedium"], "Open modal"),
241     BS5Modal("modalMedium", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalMediumTitle", "aria-hidden":"true"], 
242       BS5ModalDialog(
243         BS5ModalContent(
244           BS5ModalHeader(
245             BS5ModalTitle("modalMediumTitle", "Modal title"),
246             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
247           BS5ModalBody(
248             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
249           BS5ModalFooter(
250             BS5Button(["btn-primary"], "Action"),
251             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
252     H5H5(["text-muted", "mt-3"], "Large"),
253     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalLarge"], "Open modal"),
254     BS5Modal("modalLarge", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalLargeTitle", "aria-hidden":"true"], 
255       BS5ModalDialog(["modal-lg"], 
256         BS5ModalContent(
257           BS5ModalHeader(
258             BS5ModalTitle("modalLargeTitle", "Modal title"),
259             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
260           BS5ModalBody( 
261             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
262           BS5ModalFooter(
263             BS5Button(["btn-primary"], "Action"),
264             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
265     H5H5(["text-muted", "mt-3"], "Extra Large"),
266     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalExtraLarge"], "Open modal"),
267     BS5Modal("modalExtraLarge", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalExtraLargeTitle", "aria-hidden":"true"], 
268       BS5ModalDialog(["modal-xl"], 
269         BS5ModalContent(
270           BS5ModalHeader(
271             BS5ModalTitle("modalExtraLargeTitle", "Modal title"),
272             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
273           BS5ModalBody( 
274             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
275           BS5ModalFooter(
276             BS5Button(["btn-primary"], "Action"),
277             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
278   ), 
279   `H5H5(["text-muted", "mt-3"], "Small"),
280   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalSmall"], "Open modal"),
281   BS5Modal("modalSmall", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalSmallTitle", "aria-hidden":"true"], 
282     BS5ModalDialog(["modal-sm"], 
283       BS5ModalContent(
284         BS5ModalHeader(
285           BS5ModalTitle("modalSmallTitle", "Modal title"),
286           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
287         BS5ModalBody(
288           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
289         BS5ModalFooter(
290           BS5Button(["btn-primary"], "Action"),
291           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
292   H5H5(["text-muted", "mt-3"], "Medium"),
293   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalMedium"], "Open modal"),
294   BS5Modal("modalMedium", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalMediumTitle", "aria-hidden":"true"], 
295     BS5ModalDialog(
296       BS5ModalContent(
297         BS5ModalHeader(
298           BS5ModalTitle("modalMediumTitle", "Modal title"),
299           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
300         BS5ModalBody(
301           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
302         BS5ModalFooter(
303           BS5Button(["btn-primary"], "Action"),
304           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
305   H5H5(["text-muted", "mt-3"], "Large"),
306   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalLarge"], "Open modal"),
307   BS5Modal("modalLarge", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalLargeTitle", "aria-hidden":"true"], 
308     BS5ModalDialog(["modal-lg"], 
309       BS5ModalContent(
310         BS5ModalHeader(
311           BS5ModalTitle("modalLargeTitle", "Modal title"),
312           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
313         BS5ModalBody( 
314           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
315         BS5ModalFooter(
316           BS5Button(["btn-primary"], "Action"),
317           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
318   H5H5(["text-muted", "mt-3"], "Extra Large"),
319   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalExtraLarge"], "Open modal"),
320   BS5Modal("modalExtraLarge", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalExtraLargeTitle", "aria-hidden":"true"], 
321     BS5ModalDialog(["modal-xl"], 
322       BS5ModalContent(
323         BS5ModalHeader(
324           BS5ModalTitle("modalExtraLargeTitle", "Modal title"),
325           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
326         BS5ModalBody( 
327           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
328         BS5ModalFooter(
329           BS5Button(["btn-primary"], "Action"),
330           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, 
331   ``);
332 
333 auto alwaysExample = demoBs5Example("always", "Always",  
334   H5Div(
335     H5H5(["text-muted", "mt-3"], "Always"),
336     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenAlways"], "Open modal"),
337     BS5Modal("modalFullscreenAlways", ["fade"], ["tabindex":"-1", "role":"dialog", 
338       "aria-labelledby":"modalFullscreenAlwaysTitle", "aria-hidden":"true"], 
339       BS5ModalDialog(["modal-fullscreen"], ["role":"document"], 
340         BS5ModalContent(
341           BS5ModalHeader(
342             BS5ModalTitle("modalFullscreenAlwaysTitle", "Modal title"),
343             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
344           BS5ModalBody( 
345             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
346           BS5ModalFooter(
347             BS5Button(["btn-primary"], "Action"),
348             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
349     H5H5(["text-muted", "mt-3"], "Below small"),
350     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenSm"], "Open modal"),
351     BS5Modal("modalFullscreenSm", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenSmTitle", "aria-hidden":"true"], 
352       BS5ModalDialog(["modal-fullscreen-sm-down"], ["role":"document"], 
353         BS5ModalContent(
354           BS5ModalHeader(
355             BS5ModalTitle("modalFullscreenSmTitle", "Modal title"),
356             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
357           BS5ModalBody(
358             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
359           BS5ModalFooter(
360             BS5Button(["btn-primary"], "Action"),
361             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
362     H5H5(["text-muted", "mt-3"], "Below medium"),
363     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenMd"], "Open modal"),
364       BS5Modal("modalFullscreenMd", ["fade"],  ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenMdTitle", "aria-hidden":"true"], 
365         BS5ModalDialog(["modal-fullscreen-md-down"], ["role":"document"], 
366           BS5ModalContent(
367             BS5ModalHeader(
368               BS5ModalTitle("modalFullscreenMdTitle", "Modal title"),
369               BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
370             BS5ModalBody(
371               H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
372             BS5ModalFooter(
373               BS5Button(["btn-primary"], "Action"),
374               BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
375     H5H5(["text-muted", "mt-3"], "Below large"),
376     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenLg"], "Open modal"),
377     BS5Modal("modalFullscreenLg", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenLgTitle", "aria-hidden":"true"],
378       BS5ModalDialog(["modal-fullscreen-lg-down"], ["role":"document"], 
379         BS5ModalContent(
380           BS5ModalHeader(
381             BS5ModalTitle("modalFullscreenLgTitle", "Modal title"),
382             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
383           BS5ModalBody( 
384             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
385           BS5ModalFooter(
386             BS5Button(["btn-primary"], "Action"),
387             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))), 
388     H5H5(["text-muted", "mt-3"], "Below extra large"),
389     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenXl"], "Open modal"),
390     BS5Modal("modalFullscreenXl", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenXlTitle", "aria-hidden":"true"], 
391       BS5ModalDialog(["modal-fullscreen-xl-down"], 
392         BS5ModalContent(
393           BS5ModalHeader(
394             BS5ModalTitle("modalFullscreenXlTitle", "Modal title"),
395             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
396           BS5ModalBody(
397             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
398           BS5ModalFooter(
399             BS5Button(["btn-primary"], "Action"),
400             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
401     H5H5(["text-muted", "mt-3"], "Below extra extra large"),
402     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenXxl"], "Open modal"),
403     BS5Modal("modalFullscreenXxl", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenXxlTitle", "aria-hidden":"true"], 
404       BS5ModalDialog(["modal-fullscreen-xxl-down"], ["role":"document"], 
405         BS5ModalContent(
406           BS5ModalHeader(
407             BS5ModalTitle("modalFullscreenXxlTitle", "Modal title"),
408             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
409           BS5ModalBody( 
410             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
411           BS5ModalFooter(
412             BS5Button(["btn-primary"], "Action"),
413             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
414 ), 
415 `H5H5(["text-muted", "mt-3"], "Always"),
416   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenAlways"], "Open modal"),
417   BS5Modal("modalFullscreenAlways", ["fade"], ["tabindex":"-1", "role":"dialog", 
418   "aria-labelledby":"modalFullscreenAlwaysTitle", "aria-hidden":"true"], 
419     BS5ModalDialog(["modal-fullscreen"], ["role":"document"], 
420       BS5ModalContent(
421         BS5ModalHeader(
422           BS5ModalTitle("modalFullscreenAlwaysTitle", "Modal title"),
423           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
424         BS5ModalBody( 
425           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
426         BS5ModalFooter(
427           BS5Button(["btn-primary"], "Action"),
428           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
429   H5H5(["text-muted", "mt-3"], "Below small"),
430   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenSm"], "Open modal"),
431   BS5Modal("modalFullscreenSm", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenSmTitle", "aria-hidden":"true"], 
432     BS5ModalDialog(["modal-fullscreen-sm-down"], ["role":"document"], 
433       BS5ModalContent(
434         BS5ModalHeader(
435           BS5ModalTitle("modalFullscreenSmTitle", "Modal title"),
436           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
437         BS5ModalBody(
438           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
439         BS5ModalFooter(
440           BS5Button(["btn-primary"], "Action"),
441           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
442   H5H5(["text-muted", "mt-3"], "Below medium"),
443   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenMd"], "Open modal"),
444     BS5Modal("modalFullscreenMd", ["fade"],  ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenMdTitle", "aria-hidden":"true"], 
445       BS5ModalDialog(["modal-fullscreen-md-down"], ["role":"document"], 
446         BS5ModalContent(
447           BS5ModalHeader(
448             BS5ModalTitle("modalFullscreenMdTitle", "Modal title"),
449             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
450           BS5ModalBody(
451             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
452           BS5ModalFooter(
453             BS5Button(["btn-primary"], "Action"),
454             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
455   H5H5(["text-muted", "mt-3"], "Below large"),
456   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenLg"], "Open modal"),
457   BS5Modal("modalFullscreenLg", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenLgTitle", "aria-hidden":"true"],
458     BS5ModalDialog(["modal-fullscreen-lg-down"], ["role":"document"], 
459       BS5ModalContent(
460         BS5ModalHeader(
461           BS5ModalTitle("modalFullscreenLgTitle", "Modal title"),
462           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
463         BS5ModalBody( 
464           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
465         BS5ModalFooter(
466           BS5Button(["btn-primary"], "Action"),
467           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))), 
468   H5H5(["text-muted", "mt-3"], "Below extra large"),
469   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenXl"], "Open modal"),
470   BS5Modal("modalFullscreenXl", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenXlTitle", "aria-hidden":"true"], 
471     BS5ModalDialog(["modal-fullscreen-xl-down"], 
472       BS5ModalContent(
473         BS5ModalHeader(
474           BS5ModalTitle("modalFullscreenXlTitle", "Modal title"),
475           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
476         BS5ModalBody(
477           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
478         BS5ModalFooter(
479           BS5Button(["btn-primary"], "Action"),
480           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close"))))),
481   H5H5(["text-muted", "mt-3"], "Below extra extra large"),
482   BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalFullscreenXxl"], "Open modal"),
483   BS5Modal("modalFullscreenXxl", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalFullscreenXxlTitle", "aria-hidden":"true"], 
484     BS5ModalDialog(["modal-fullscreen-xxl-down"], ["role":"document"], 
485       BS5ModalContent(
486         BS5ModalHeader(
487           BS5ModalTitle("modalFullscreenXxlTitle", "Modal title"),
488           BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
489         BS5ModalBody( 
490           H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
491         BS5ModalFooter(
492           BS5Button(["btn-primary"], "Action"),
493           BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, 
494       ``);
495 
496 auto animationExample = demoBs5Example("animation", "No animation",  
497   H5Div(
498     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalNoAnimation"], "Open modal"),
499     BS5Modal("modalNoAnimation", ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalNoAnimationTitle", "aria-hidden":"true"], 
500       BS5ModalDialog(["role":"document"], 
501         BS5ModalContent(
502           BS5ModalHeader(
503             BS5ModalTitle("modalNoAnimationTitle", "Modal title"),
504             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
505           BS5ModalBody(
506             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
507           BS5ModalFooter(
508             BS5Button(["btn-primary"], "Action"),
509             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
510   ), 
511   `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalNoAnimation"], "Open modal"),
512     BS5Modal("modalNoAnimation", ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalNoAnimationTitle", "aria-hidden":"true"], 
513       BS5ModalDialog(["role":"document"], 
514         BS5ModalContent(
515           BS5ModalHeader(
516             BS5ModalTitle("modalNoAnimationTitle", "Modal title"),
517             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])),
518           BS5ModalBody(
519             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
520           BS5ModalFooter(
521             BS5Button(["btn-primary"], "Action"),
522             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, 
523             ``);
524 
525 auto backExample = demoBs5Example("backdrop", "Static backdrop",  
526   H5Div(
527     BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalStaticBackdrop", "data-backdrop":"static", "data-keyboard":"false"], "Open modal"),
528     BS5Modal("modalStaticBackdrop", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalStaticBackdropTitle", "aria-hidden":"true"], 
529       BS5ModalDialog(["role":"document"],
530         BS5ModalContent(
531           BS5ModalHeader(
532             BS5ModalTitle("modalStaticBackdropTitle", "Modal title"),
533             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])), 
534           BS5ModalBody(
535             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
536           BS5ModalFooter(
537             BS5Button(["btn-primary"], "Action"),
538             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))
539   ), 
540   `BS5Button(["btn-primary"], ["data-toggle":"modal", "data-bs-target":"#modalStaticBackdrop", "data-backdrop":"static", "data-keyboard":"false"], "Open modal"),
541     BS5Modal("modalStaticBackdrop", ["fade"], ["tabindex":"-1", "role":"dialog", "aria-labelledby":"modalStaticBackdropTitle", "aria-hidden":"true"], 
542       BS5ModalDialog(["role":"document"],
543         BS5ModalContent(
544           BS5ModalHeader(
545             BS5ModalTitle("modalStaticBackdropTitle", "Modal title"),
546             BS5Button(["btn-close"], ["data-dismiss":"modal", "aria-label":"Close"])), 
547           BS5ModalBody(
548             H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.")),
549           BS5ModalFooter(
550             BS5Button(["btn-primary"], "Action"),
551             BS5Button(["btn-secondary"], ["data-dismiss":"modal"], "Close")))))`, ``);
552 
553       return 
554 H5Main(["style":"margin-top:70px;"], 
555   H5Div(["container-fluid", "mt-3", "bg-light"],
556     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 
557     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Modals")),
558   BS5Container(["mt-3"]).row(
559     H5Div(["col-12", "col-lg-2"], 
560       listLevels("basic"),
561       listAreas("basic", "components"),
562       listSections("basic", "components", "modals")),
563     H5Div(["col-12", "col-lg-8"], 
564       dateInfo(this),
565       H5H2(["display-4"], "Modals"),
566       H5Hr,
567 
568       staticExample,  
569       headerExample,  
570       footerExample,  
571       longExample,  
572       scrollableExample,  
573       verticallyExample,  
574       sizingExample,  
575       animationExample,  
576       backExample,
577       alwaysExample,
578       animationExample,
579       backExample
580 
581      ),
582     H5Div(["col-12", "col-lg-2"]))).toString;
583     }
584   });
585 }