Modals with dynamically loaded content, open modals within modals and possibility to close the modal with the back button.
For this example we need two javascript files that you can download from: here and here or:
<script src="https://cdn.jsdelivr.net/gh/FranBar1966/bootstrap-5-modal-dynamic@0.0.1/src/modal-dynamic.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/FranBar1966/bootstrap-5-modal-close-on-back@0.0.1/src/modal-close-on-back.min.js"></script>
They are independent utilities, either or both can be used independently.
Image Login Register ReminderFor the back button simply add the modal-close-on-back.min.js file to your page and that's it, you don't need to do anything else.
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal1"
>
Simple default modal
</button>
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModal1Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModal1Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
You can click the Back Button to close this modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can open a modal inside another modal. The container can be of any kind, but the one that is opened must be: modal-dynamic
<!-- First modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal2"
>
Modal over modal
</button>
<!-- Within the first modal -->
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-over-over"
data-title="Modal over modal"
data-url="#modal-content-over"
data-width="400"
data-class="fade"
data-template="#template1"
data-keyboard="true"
data-backdrop="">
Open modal
</a>
You can open a modal inside another modal and another one... the limit is the usability.
<!-- First modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal2"
>
Modal over modal
</button>
<!--Modals -->
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModal3Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModal3Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-over-over"
data-title="Modal over modal"
data-url="#modal-content-over"
data-width="400"
data-class="fade"
data-template="#template1"
data-keyboard="true"
data-backdrop="">
Open modal
</a>
</p>
<p>You can click the Back Button to close modals.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="template1" tabindex="-1" aria-labelledby="template1Label" aria-hidden="true">
<div class="modal-dialog shadow">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="template1Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="d-none">
<div id="modal-content-over">
<h5>Over... over...</h5>
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-id"
data-title="Question"
data-url="#modal-content"
data-width="350"
data-class="fade"
data-template="#modalChoice"
data-keyboard="true"
data-backdrop="">
Open modal question
</a>
<p class="mt-2">Close a bootstrap modal with back button</p>
</div>
</div>
<div class="modal p-4 py-md-5" id="modalChoice" tabindex="-1" role="dialog">
<div class="modal-dialog shadow">
<div class="modal-content rounded-3 shadow">
<div class="modal-body p-4 text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="modal-footer flex-nowrap p-0"> <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end" data-bs-dismiss="modal"><strong>Yes</strong></button> <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button> </div>
</div>
</div>
</div>
<div class="d-none">
<div id="modal-content">
<h5>Question</h5>
<p>Close a bootstrap modal with back button</p>
</div>
</div>
You can dynamically load other types of content, such as images, into the modal.
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-image"
data-title="Image"
data-url="image.html"
data-width="800"
data-class="fade"
data-template="#templateImage"
data-keyboard="true"
data-backdrop="">
Image
</a>
<div class="modal" id="templateImage" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body p-0 m-0 shadow" data-bs-dismiss="modal">
<div class="spinner-border" role="status">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
You can group a modal with the same ID, to display different content loaded dynamically in the same modal. The demo has included in the help button “?” a link to open another modal, I think this would be an acceptable example to open a modal inside another modal.
<div class="modal fade" id="templateUser" tabindex="-1" aria-labelledby="template1Label" aria-hidden="true">
<div class="modal-dialog shadow">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="template1Label">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body mx-4 my-3">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="modal-footer">
<div class="ms-md-0">
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-user"
data-title="Reminder"
data-url="reminder.html"
data-width="475"
data-class="fade"
data-template="#templateUser"
data-keyboard="true"
data-backdrop="static">
Reminder
</a>
</div>
<div class="ms-md-auto">
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-user"
data-title="Sign in"
data-url="login.html"
data-width="475"
data-class="fade"
data-template="#templateUser"
data-keyboard="true"
data-backdrop="static">
Login
</a>
<a type="button"
class="btn btn-primary modal-dynamic"
href="#modal-user"
data-title="Sign up"
data-url="register.html"
data-width="475"
data-class="fade"
data-template="#templateUser"
data-keyboard="true"
data-backdrop="static">
Register
</a>
</div>
</div>
</div>
</div>
</div>
The native behavior when opening a modal in another modal is to close the current modal before opening the new modal. In this case for the back button to work it is necessary to "fade".
<div class="modal fade" id="modalA" tabindex="-1" aria-labelledby="modalALabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modalALabel">Modal A</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
In this case for the back button to work it is necessary to "fade"
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalA" disabled>
Open native modal A
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalB">
Open native modal B
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalB" tabindex="-1" aria-labelledby="modalBLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modalBLabel">Modal B</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
In this case for the back button to work it is necessary to "fade"
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalA">
Open native modal A
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalB" disabled>
Open native modal B
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Close a bootstrap modal with back button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut vestibulum lectus. Morbi et imperdiet purus. Integer gravida fringilla congue.