Download Back To CSSScript.Com
Generate customizable Bootstrap 5 modals with dynamic content via HTML data attributes. Load content from AJAX or existing HTML elements.
For 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.
<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>
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.