Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.
Bootstrap 5 Toggle between modals Attributes:
- data-bs-target: This attribute is added to the button in the modal which will hold the target modal to be toggled.
- data-bs-toggle: This attribute is added to the button in the modal which will specify which type of toggling to be done by the button.
Syntax:
<div class="modal" id="exampleModalToggle">
<div class="modal-dialog">
....
</div>
</div>
<div class="modal" id="exampleModalToggle2">
<div class="modal-dialog">
...
</div>
</div>
Example 1: The code below demonstrates how we can make a login and reset password modal and toggle between them.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Toggle between modals</h4>
<div class="modal fade" id="login">
<div class="modal-dialog
modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginLabel">
Login
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputEmail1"
class="form-label">
Email address
</label>
<input type="email" class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1"
class="form-label">
Password
</label>
<input type="password"
class="form-control"
id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-success">
Login</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success"
data-bs-target="#reset-Pass"
data-bs-toggle="modal"
data-bs-dismiss="modal">
Reset Password
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reset-Pass">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reset-Pass">
Reset Password
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="exampleInputPassword1"
class="form-label">
Password
</label>
<input type="password"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="exampleInputPassword1"
class="form-label">
Confirm Password
</label>
<input type="password"
class="form-control"
id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-success">
Reset
</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success"
data-bs-target="#login"
data-bs-toggle="modal"
data-bs-dismiss="modal">
Back to Login
</button>
</div>
</div>
</div>
</div>
<a class="btn btn-success m-4"
data-bs-toggle="modal"
href="#login"
role="button">
Login
</a>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can vertically scroll modals and toggle between them.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Toggle between modals</h4>
<div class="modal fade" id="DS">
<div class="modal-dialog modal-dialog-centered
modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="DSLabel">
Data Structures
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body p-5">
A data structure is a storage that is
used to store and organize data.
It is a way of arranging data on a
computer so that it can be accessed
and updated efficiently.
</div>
<div class="modal-footer">
<button class="btn btn-success"
data-bs-target="#algo"
data-bs-toggle="modal"
data-bs-dismiss="modal">
Open Algo Modal
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="algo"
aria-hidden="true" aria-labelledby="DSLabel2"
tabindex="-1">
<div class="modal-dialog modal-dialog-centered
modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="AlgoLabel">
Algorithm
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body p-5">
The word Algorithm means ”
A set of rules to be followed in
calculations or other problem-solving
operations ” Or ” A procedure for solving
a mathematical problem in a finite
number of steps that frequently
by recursive operations “.
</div>
<div class="modal-footer">
<button class="btn btn-success" data-bs-target="#DS"
data-bs-toggle="modal" data-bs-dismiss="modal">
Back to DS Modal
</button>
</div>
</div>
</div>
</div>
<a class="btn btn-success m-4" data-bs-toggle="modal"
href="#DS" role="button">
Open DS modal
</a>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#toggle-between-modals