Bootstrap modal window: Close current and open a new modal

Posted on February 13, 2018 by Suresh Kamrushi in Javascript

This is very basic requirement to open second modal window by clicking on link on first modal window. When I search for it found difficult to get the answer which is very simple and no one aware of that. So I though of sharing a small code to demonstrate how you can open another modal window by closing first one.
Simple copy the below code and create an HTML file and access using browser. On Clicking of Button it will open login box and on clicking forgot password link it will open another modal window of forgot password by closing login window.

SAMPLE HTML CODE:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#ModalLogin">Open Modal</button>
      <!---- Forgot Password Popup --->
      <div class="modal fade" id="ModalForgotPassword" role="dialog">
         <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Forgot Password</h4>
               </div>
               <div class="modal-body">
                  <form>
                     <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmai1" aria-describedby="emailHelp" placeholder="Enter email">                        
                     </div>
                     <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
               </div>
            </div>
         </div>
      </div>
      <!---- Forgot Password Popup --->
      <!---- Login Popup --->
      <div class="modal fade" id="ModalLogin" role="dialog">
      <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
               <form id="loginForm">
                  <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label>
                     <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Enter email">
                  </div>
                  <div class="form-group">
                     <label for="exampleInputPassword1">Password</label>
                     <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                  </div>
                  <div class="form-check">
                     <a href="#" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword" class="form-check-label">Forgot Password?</a>
                     <br><br>
                  </div>
                  <button type="button" (click)="login()" class="btn btn-primary">Login</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
               </form>
            </div>
         </div>
      </div>
      <!---- Login Popup --->
   </body>
</html>

You need to add following attribute to the link or button where you want add this functionality:

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"
  Comments or questions are welcome