diff options
author | Anton <antonfedonjuk@gmail.com> | 2021-03-17 08:15:06 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-17 08:15:06 +0300 |
commit | fcac2e3aa630f6610d4c17f813199ff855b02344 (patch) | |
tree | d67c9bca7e3f70449fdf24dfa0aa8d67a322f3b0 /site | |
parent | 6ed439ff7326f3912d9cbb0db9c5ec9e29dc9381 (diff) |
Add example: toggle modal dialogs (#33301)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Diffstat (limited to 'site')
-rw-r--r-- | site/content/docs/5.0/components/modal.md | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 0f11614fde..3e8ad80102 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -509,6 +509,75 @@ exampleModal.addEventListener('show.bs.modal', function (event) { }) ``` +### Toggle between modals + +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"> + <div class="modal-dialog modal-dialog-centered"> + <div class="modal-content"> + ... + <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> + </div> + </div> + </div> +</div> +<!-- Second modal dialog --> +<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="..." tabindex="-1"> + <div class="modal-dialog modal-dialog-centered"> + <div class="modal-content"> + ... + <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> + </div> + </div> + </div> +</div> +<!-- Open first dialog --> +<a class="btn btn-primary" data-bs-toggle="modal" href="#modal" role="button">Open #modal</a> +``` + ### Change animation The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation. |