diff options
author | Mark Otto <markdotto@gmail.com> | 2021-04-15 09:21:36 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2021-04-18 02:08:58 +0300 |
commit | d25920b182dc2dbb758345697034008897e04117 (patch) | |
tree | f8fd8513cd62d7c70f020864d0eb3ce21b065286 /site/content/docs | |
parent | 95aec47d21374510ba837d97a7245834190dd7df (diff) |
Fix toggle between modals example
Diffstat (limited to 'site/content/docs')
-rw-r--r-- | site/content/docs/5.0/components/modal.md | 71 |
1 files changed, 21 insertions, 50 deletions
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 3e8ad80102..41aedeb012 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -513,70 +513,41 @@ exampleModal.addEventListener('show.bs.modal', function (event) { Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals. -<div class="bd-example"> - <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> - <div class="modal-dialog modal-dialog-centered"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> - </div> - <div class="modal-body"> - Show a second modal and hide this one with the button below. - </div> - <div class="modal-footer"> - <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button> - </div> - </div> - </div> - </div> - <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> - <div class="modal-dialog modal-dialog-centered"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> - </div> - <div class="modal-body"> - Hide this modal and show the first with the button below. - </div> - <div class="modal-footer"> - <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button> - </div> - </div> - </div> - </div> - <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> -</div> - -```html -<!-- First modal dialog --> -<div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="..." tabindex="-1"> +{{< example >}} +<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> - ... + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + Show a second modal and hide this one with the button below. + </div> <div class="modal-footer"> - <!-- Toogle to second dialog --> - <button class="btn btn-primary" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">Open #modal2</button> + <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button> </div> </div> </div> </div> -<!-- Second modal dialog --> -<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="..." tabindex="-1"> +<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> - ... + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + Hide this modal and show the first with the button below. + </div> <div class="modal-footer"> - <!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway --> - <a class="btn btn-primary" href="#modal" data-bs-toggle="modal" role="button">Open #modal</a> + <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button> </div> </div> </div> </div> -<!-- Open first dialog --> -<a class="btn btn-primary" data-bs-toggle="modal" href="#modal" role="button">Open #modal</a> -``` +<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> +{{< /example >}} ### Change animation |