Skip to content

Commit 1b7e13f

Browse files
ysdsysds
authored
Update modal docs (#30325)
1 parent 3e5bc4c commit 1b7e13f

File tree

1 file changed

+31
-125
lines changed
  • site/content/docs/4.3/components

1 file changed

+31
-125
lines changed

‎site/content/docs/4.3/components/modal.md‎

Lines changed: 31 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
8686

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

89-
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
89+
<div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
9090
<div class="modal-dialog" role="document">
9191
<div class="modal-content">
9292
<div class="modal-header">
@@ -144,7 +144,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
144144

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

147-
<div id="staticBackdropLive" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
147+
<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
148148
<div class="modal-dialog" role="document">
149149
<div class="modal-content">
150150
<div class="modal-header">
@@ -203,7 +203,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
203203

204204
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.
205205

206-
<div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
206+
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
207207
<div class="modal-dialog" role="document">
208208
<div class="modal-content">
209209
<div class="modal-header">
@@ -246,37 +246,9 @@ When modals become too long for the user's viewport or device, they scroll indep
246246
</button>
247247
</div>
248248

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

279-
<div id="exampleModalScrollable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
251+
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
280252
<div class="modal-dialog modal-dialog-scrollable" role="document">
281253
<div class="modal-content">
282254
<div class="modal-header">
@@ -320,38 +292,17 @@ You can also create a scrollable modal that allows scroll the modal body by addi
320292
</div>
321293

322294
{{< highlight html >}}
323-
<!-- Button trigger modal -->
324-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
325-
Launch demo modal
326-
</button>
327-
328-
<!-- Modal -->
329-
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
330-
<div class="modal-dialog modal-dialog-scrollable" role="document">
331-
<div class="modal-content">
332-
<div class="modal-header">
333-
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
334-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
335-
<span aria-hidden="true">&times;</span>
336-
</button>
337-
</div>
338-
<div class="modal-body">
339-
...
340-
</div>
341-
<div class="modal-footer">
342-
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
343-
<button type="button" class="btn btn-primary">Save changes</button>
344-
</div>
345-
</div>
346-
</div>
295+
<!-- Scrollable modal -->
296+
<div class="modal-dialog modal-dialog-scrollable" role="document">
297+
...
347298
</div>
348299
{{< /highlight >}}
349300

350301
### Vertically centered
351302

352303
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
353304

354-
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
305+
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
355306
<div class="modal-dialog modal-dialog-centered" role="document">
356307
<div class="modal-content">
357308
<div class="modal-header">
@@ -371,8 +322,8 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
371322
</div>
372323
</div>
373324

374-
<div id="exampleModalCenteredScrollable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
375-
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
325+
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
326+
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
376327
<div class="modal-content">
377328
<div class="modal-header">
378329
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
@@ -405,38 +356,22 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
405356
</div>
406357

407358
{{< highlight html >}}
408-
<!-- Button trigger modal -->
409-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
410-
Launch demo modal
411-
</button>
359+
<!-- Vertically centered modal -->
360+
<div class="modal-dialog modal-dialog-centered" role="document">
361+
...
362+
</div>
412363

413-
<!-- Modal -->
414-
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
415-
<div class="modal-dialog modal-dialog-centered" role="document">
416-
<div class="modal-content">
417-
<div class="modal-header">
418-
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
419-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
420-
<span aria-hidden="true">&times;</span>
421-
</button>
422-
</div>
423-
<div class="modal-body">
424-
...
425-
</div>
426-
<div class="modal-footer">
427-
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
428-
<button type="button" class="btn btn-primary">Save changes</button>
429-
</div>
430-
</div>
431-
</div>
364+
<!-- Vertically centered scrollable modal -->
365+
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
366+
...
432367
</div>
433368
{{< /highlight >}}
434369

435370
### Tooltips and popovers
436371

437372
[Tooltips]({{< docsref "/components/tooltips" >}}) and [popovers]({{< docsref "/components/popovers" >}}) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
438373

439-
<div id="exampleModalPopovers" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
374+
<div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
440375
<div class="modal-dialog" role="document">
441376
<div class="modal-content">
442377
<div class="modal-header">
@@ -480,7 +415,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
480415

481416
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.
482417

483-
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
418+
<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
484419
<div class="modal-dialog" role="document">
485420
<div class="modal-content">
486421
<div class="modal-header">
@@ -684,51 +619,22 @@ Modals have three optional sizes, available via modifier classes to be placed on
684619
Our default modal without modifier class constitutes the "medium" size modal.
685620

686621
<div class="bd-example">
687-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
688-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
689-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
622+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalXl">Extra large modal</button>
623+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLg">Large modal</button>
624+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSm">Small modal</button>
690625
</div>
691626

692627
{{< highlight html >}}
693-
<!-- Extra large modal -->
694-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
695-
696-
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
697-
<div class="modal-dialog modal-xl" role="document">
698-
<div class="modal-content">
699-
...
700-
</div>
701-
</div>
702-
</div>
703-
704-
<!-- Large modal -->
705-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
706-
707-
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
708-
<div class="modal-dialog modal-lg" role="document">
709-
<div class="modal-content">
710-
...
711-
</div>
712-
</div>
713-
</div>
714-
715-
<!-- Small modal -->
716-
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
717-
718-
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
719-
<div class="modal-dialog modal-sm" role="document">
720-
<div class="modal-content">
721-
...
722-
</div>
723-
</div>
724-
</div>
628+
<div class="modal-dialog modal-xl" role="document">...</div>
629+
<div class="modal-dialog modal-lg" role="document">...</div>
630+
<div class="modal-dialog modal-sm" role="document">...</div>
725631
{{< /highlight >}}
726632

727-
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
633+
<div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
728634
<div class="modal-dialog modal-xl" role="document">
729635
<div class="modal-content">
730636
<div class="modal-header">
731-
<h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
637+
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
732638
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
733639
<span aria-hidden="true">&times;</span>
734640
</button>
@@ -740,11 +646,11 @@ Our default modal without modifier class constitutes the "medium" size modal.
740646
</div>
741647
</div>
742648

743-
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
649+
<div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
744650
<div class="modal-dialog modal-lg" role="document">
745651
<div class="modal-content">
746652
<div class="modal-header">
747-
<h5 class="modal-title h4" id="myLargeModalLabel">Large modal</h5>
653+
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
748654
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
749655
<span aria-hidden="true">&times;</span>
750656
</button>
@@ -756,11 +662,11 @@ Our default modal without modifier class constitutes the "medium" size modal.
756662
</div>
757663
</div>
758664

759-
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
665+
<div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
760666
<div class="modal-dialog modal-sm" role="document">
761667
<div class="modal-content">
762668
<div class="modal-header">
763-
<h5 class="modal-title h4" id="mySmallModalLabel">Small modal</h5>
669+
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
764670
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
765671
<span aria-hidden="true">&times;</span>
766672
</button>

0 commit comments

Comments
 (0)