如何在同一个模态中打开和关闭另一个模态？答案

【问题标题】：how to open and close another modal in same modal?如何在同一个模态中打开和关闭另一个模态？
【发布时间】：2018-03-22 08:52:04
【问题描述】：

我正在使用引导模式进行登录和注册。我想在同一个按钮上关闭登录模式后打开注册模式。现在注册模式在登录弹出时单击按钮打开。单击覆盖后，两个弹出关闭但覆盖没有隐藏。

所以为了隐藏第一个模态，我使用data-dismiss="modal" 关闭第一个模态，但它没有打开另一个模态。我想在单击覆盖时关闭两个模态或隐藏第一个模态，然后显示另一个模态。如果没有 jQuery 是可能的，那就太好了。请帮忙

<!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>

【问题讨论】：

#register 模式的代码在哪里？可能重复：stackoverflow.com/questions/18253972/…、stackoverflow.com/questions/25098967/…、stackoverflow.com/questions/25319034/…

标签： html css twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

我无法想象模态在模态中是如何显示的，但是你认为这就是你想要的吗？

<!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>

【讨论】：

【解决方案2】：

是的，这可能没有 jquery。您的 html（模态代码）的组织方式不正确。您不能在模态中使用模态。您必须将每个模式分开。

<!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>

【讨论】：

【解决方案3】：

为什么要在模态框内显示模态框。试试这个。当登录按钮点击它会打开登录模式然后注册按钮->点击-打开注册模式。

    <!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>

【讨论】：