How to use multiple modal in bootstrap?
May 11, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To create multiple modals in bootstrap, you have to handle multiple modal ids and trigger those id different buttons or events that’s how you can handle two or more modals in Bootstrap.
Today, I am going to show you. How to use multiple modals in bootstrap with code example.
Here, we will see an example of
- Bootstrap Nested Modal Example ( modal on modal or double modal )
- Bootstrap one after one Modal Example ( Close first modal before open another modal )
Let’s start today’s article bootstrap multiple modals
Bootstrap Nested Modal Example ( modal on modal or double modal ).
In this example, I have created the first modal and which you can open from the page and the second modal which you can open from the first modal.
So this is a basic example of Modal inside modal or modal over modal.
Here, In modal two I used some custom CSS to handle the backdrop issue in multiple modals.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<title>Bootstrap</title>
</head>
<body>
<div
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
"
>
<a data-toggle="modal" href="#myModal" class="btn btn-primary"
>Launch modal</a
>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
×
</button>
</div>
<div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<a data-toggle="modal" href="#myModal2" class="btn btn-primary"
>Launch modal</a
>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal modal-md" id="myModal2" style="background: rgba(0, 0, 0, 0.5);
z-index: 1072 !important; padding: 100px">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
×
</button>
</div>
<div class="container"></div>
<div class="modal-body">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y
archivos de texto.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"
></script>
</body>
</html>Check the output of the above code example of bootstrap two modals on the same page. here I also solved the bootstrap multiple modals modal-backdrop issue.
Here, we are provided code codesandbox links for the above program for making bootstrap multiple modals on one page or nested modal example. Then you can use it whenever you want and do the changes as per your requirements.
Bootstrap one after one Modal Example
This way is the safest way to handle multiple modals on a single page.
Here, I opened the first modal when someone clicks on the page button and someone opens the second modal then before opening the second modal I am closing the first one using data-dismiss="modal".
So here, you don’t need any custom CSS for handling backdrop issues.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<title>Bootstrap</title>
</head>
<body>
<div
style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
"
>
<a data-toggle="modal" href="#myModal" class="btn btn-primary"
>Launch modal</a
>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
×
</button>
</div>
<div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<a data-dismiss="modal" data-toggle="modal" href="#myModal2" class="btn btn-primary"
>Launch modal</a
>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal modal-md" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
×
</button>
</div>
<div class="container"></div>
<div class="modal-body">
Lorem Ipsum es simplemente el texto de relleno de las imprentas y
archivos de texto.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"
></script>
</body>
</html>Check the output of the above code example of bootstrap two modals on the same page shown one by one.
Here, we are provided code codesandbox links for the above program to make bootstrap multiple modals on one page or nested modal example. Then you can use it whenever you want and do the changes as per your requirements.
Happy Coding,
I hope the above example with help you to do your task.