how to open and close another modal in same modal?

Question

I'm using bootstrap modal for login and register. I want to open register modal in after closing login modal on same button. Now register modal is opening on click of button on login pop up. After clicking on overlay the both pop going close but overlay is not hiding.

So for hiding first modal I used data-dismiss="modal" for closing first modal but it's not opening another modal. I want to close both modal on clicking on overlay or hide first modal and then show another modal. If it's possible without jQuery then great. Please help

<!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">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <p>login</p>
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register" data-dismiss="modal">register</button>
        </div>
          <div class="modal fade" id="register" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-body">
                  <p>register</p>
                </div>                

              </div>
              
            </div>
          </div>

      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

where's the code for the #register modal? possible dup of: https://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new, https://stackoverflow.com/questions/25098967/close-one-modal-and-open-a-new-modal-with-one-button, https://stackoverflow.com/questions/25319034/open-a-modal-from-another-modal-and-close-the-first-launching-modal — Carol Skelly, Mar 22 '18 at 11:46

score 1 · Answer 1 · answered Mar 22 '18 at 09:05

I can't imagine how the modal show inside modal, but do you think this is what you want?

<!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">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <p>login</p>
          <button id="register-button" type="button" class="btn btn-info btn-lg" data-dismiss="modal">register</button>
        </div>


      </div>

    </div>
  </div>
  <div class="modal fade" id="register" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-body">
                  <p>register</p>
                </div>                

              </div>

            </div>
          </div>
  </div>
</div>
<script>
    $("#register-button").click(function(){
    $("#register").modal("show")
  })
</script>
</body>
</html>

score 1 · Answer 2 · answered Mar 22 '18 at 09:31

Yes, this possible without jquery. Your html(modal code) is not organized proper way. You can not use a modal within a modal. You have to be separate each modal.

<!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">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <p>login</p>
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register" data-dismiss="modal">register</button>
        </div>              

      </div>
      
    </div>
  </div>
  <div class="modal fade" id="register" role="dialog">
            <div class="modal-dialog">
            
              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-body">
                  <p>register</p>
                </div>                

              </div>
              
            </div>
          </div>
</div>

</body>
</html>

score 0 · Answer 3 · answered Mar 22 '18 at 09:36

Why do you want to show a modal inside a modal. try this one. when login button clicks it will open login modal then register button->click - open register modal.

    <!DOCTYPE html>
<html>
<head>
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<style type="text/css">

</style>
</head>

<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-body">
          <p>login</p>
          <button type="button" class="btn btn-info btn-lg"  id="btn_register">register</button>
        </div>


      </div>

    </div>
  </div>
     <div class="modal fade" id="register" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-body">
                  <p>register</p>
                </div>                

              </div>

            </div>
          </div>

</div>

<script type="text/javascript">
     $("#btn_register").click(function(){

        $("#login").modal("hide");
    $("#register").modal("show");
  });
</script>
</body>
</html>

how to open and close another modal in same modal?

3 Answers3