Skip to content

Commit f2b058d

Browse files
ysdsXhmikosR
ysds
authored and
XhmikosR
committed
Update modal docs (#30325)
1 parent 638b6ff commit f2b058d

File tree

1 file changed

+31
-125
lines changed

1 file changed

+31
-125
lines changed

‎site/docs/4.4/components/modal.md

+31-125
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
8181

8282
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
8383

84-
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
84+
<div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
8585
<div class="modal-dialog" role="document">
8686
<div class="modal-content">
8787
<div class="modal-header">
@@ -139,7 +139,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
139139

140140
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
141141

142-
<div id="staticBackdropLive" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
142+
<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
143143
<div class="modal-dialog" role="document">
144144
<div class="modal-content">
145145
<div class="modal-header">
@@ -198,7 +198,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
198198

199199
When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
200200

201-
<div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
201+
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
202202
<div class="modal-dialog" role="document">
203203
<div class="modal-content">
204204
<div class="modal-header">
@@ -241,37 +241,9 @@ When modals become too long for the user's viewport or device, they scroll indep
241241
</button>
242242
</div>
243243

244-
{% highlight html %}
245-
<!-- Button trigger modal -->
246-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
247-
Launch demo modal
248-
</button>
249-
250-
<!-- Modal -->
251-
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
252-
<div class="modal-dialog" role="document">
253-
<div class="modal-content">
254-
<div class="modal-header">
255-
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
256-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
257-
<span aria-hidden="true">&times;</span>
258-
</button>
259-
</div>
260-
<div class="modal-body">
261-
...
262-
</div>
263-
<div class="modal-footer">
264-
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
265-
<button type="button" class="btn btn-primary">Save changes</button>
266-
</div>
267-
</div>
268-
</div>
269-
</div>
270-
{% endhighlight %}
271-
272244
You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
273245

274-
<div id="exampleModalScrollable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
246+
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
275247
<div class="modal-dialog modal-dialog-scrollable" role="document">
276248
<div class="modal-content">
277249
<div class="modal-header">
@@ -315,38 +287,17 @@ You can also create a scrollable modal that allows scroll the modal body by addi
315287
</div>
316288

317289
{% highlight html %}
318-
<!-- Button trigger modal -->
319-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
320-
Launch demo modal
321-
</button>
322-
323-
<!-- Modal -->
324-
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
325-
<div class="modal-dialog modal-dialog-scrollable" role="document">
326-
<div class="modal-content">
327-
<div class="modal-header">
328-
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
329-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
330-
<span aria-hidden="true">&times;</span>
331-
</button>
332-
</div>
333-
<div class="modal-body">
334-
...
335-
</div>
336-
<div class="modal-footer">
337-
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
338-
<button type="button" class="btn btn-primary">Save changes</button>
339-
</div>
340-
</div>
341-
</div>
290+
<!-- Scrollable modal -->
291+
<div class="modal-dialog modal-dialog-scrollable" role="document">
292+
...
342293
</div>
343294
{% endhighlight %}
344295

345296
### Vertically centered
346297

347298
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
348299

349-
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
300+
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
350301
<div class="modal-dialog modal-dialog-centered" role="document">
351302
<div class="modal-content">
352303
<div class="modal-header">
@@ -366,8 +317,8 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
366317
</div>
367318
</div>
368319

369-
<div id="exampleModalCenteredScrollable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
370-
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
320+
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
321+
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
371322
<div class="modal-content">
372323
<div class="modal-header">
373324
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
@@ -400,38 +351,22 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
400351
</div>
401352

402353
{% highlight html %}
403-
<!-- Button trigger modal -->
404-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
405-
Launch demo modal
406-
</button>
354+
<!-- Vertically centered modal -->
355+
<div class="modal-dialog modal-dialog-centered" role="document">
356+
...
357+
</div>
407358

408-
<!-- Modal -->
409-
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
410-
<div class="modal-dialog modal-dialog-centered" role="document">
411-
<div class="modal-content">
412-
<div class="modal-header">
413-
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
414-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
415-
<span aria-hidden="true">&times;</span>
416-
</button>
417-
</div>
418-
<div class="modal-body">
419-
...
420-
</div>
421-
<div class="modal-footer">
422-
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
423-
<button type="button" class="btn btn-primary">Save changes</button>
424-
</div>
425-
</div>
426-
</div>
359+
<!-- Vertically centered scrollable modal -->
360+
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
361+
...
427362
</div>
428363
{% endhighlight %}
429364

430365
### Tooltips and popovers
431366

432367
[Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
433368

434-
<div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
369+
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
435370
<div class="modal-dialog" role="document">
436371
<div class="modal-content">
437372
<div class="modal-header">
@@ -475,7 +410,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
475410

476411
Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.
477412

478-
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
413+
<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
479414
<div class="modal-dialog" role="document">
480415
<div class="modal-content">
481416
<div class="modal-header">
@@ -676,52 +611,23 @@ Modals have three optional sizes, available via modifier classes to be placed on
676611
Our default modal without modifier class constitutes the "medium" size modal.
677612

678613
<div class="bd-example">
679-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
680-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
681-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
614+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalXl">Extra large modal</button>
615+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLg">Large modal</button>
616+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSm">Small modal</button>
682617
</div>
683618

684619
{% highlight html %}
685-
<!-- Extra large modal -->
686-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
687-
688-
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
689-
<div class="modal-dialog modal-xl" role="document">
690-
<div class="modal-content">
691-
...
692-
</div>
693-
</div>
694-
</div>
695-
696-
<!-- Large modal -->
697-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
698-
699-
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
700-
<div class="modal-dialog modal-lg" role="document">
701-
<div class="modal-content">
702-
...
703-
</div>
704-
</div>
705-
</div>
706-
707-
<!-- Small modal -->
708-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
709-
710-
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
711-
<div class="modal-dialog modal-sm" role="document">
712-
<div class="modal-content">
713-
...
714-
</div>
715-
</div>
716-
</div>
620+
<div class="modal-dialog modal-xl" role="document">...</div>
621+
<div class="modal-dialog modal-lg" role="document">...</div>
622+
<div class="modal-dialog modal-sm" role="document">...</div>
717623
{% endhighlight %}
718624

719-
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
625+
<div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
720626
<div class="modal-dialog modal-xl" role="document">
721627
<div class="modal-content">
722628

723629
<div class="modal-header">
724-
<h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
630+
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
725631
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
726632
<span aria-hidden="true">&times;</span>
727633
</button>
@@ -733,12 +639,12 @@ Our default modal without modifier class constitutes the "medium" size modal.
733639
</div>
734640
</div>
735641

736-
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
642+
<div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
737643
<div class="modal-dialog modal-lg" role="document">
738644
<div class="modal-content">
739645

740646
<div class="modal-header">
741-
<h5 class="modal-title h4" id="myLargeModalLabel">Large modal</h5>
647+
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
742648
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
743649
<span aria-hidden="true">&times;</span>
744650
</button>
@@ -750,11 +656,11 @@ Our default modal without modifier class constitutes the "medium" size modal.
750656
</div>
751657
</div>
752658

753-
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
659+
<div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
754660
<div class="modal-dialog modal-sm" role="document">
755661
<div class="modal-content">
756662
<div class="modal-header">
757-
<h5 class="modal-title h4" id="mySmallModalLabel">Small modal</h5>
663+
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
758664
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
759665
<span aria-hidden="true">&times;</span>
760666
</button>

0 commit comments

Comments
 (0)