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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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