Question

我使用bootstrap模式进行登录和注册。我想在关闭相同按钮的登录模式后打开注册模式。现在注册模式在登录弹出时单击按钮打开。单击叠加后，两个弹出关闭但叠加未隐藏。

因此，为了隐藏第一个模态，我使用data-dismiss="modal"来关闭第一个模态，但它没有打开另一个模态。我想在点击叠加时关闭两个模态或隐藏第一个模态然后显示另一个模态。如果没有jQuery可能，那么很棒。请帮忙

＆＃13;

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

＆＃13;

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

Answer 2

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

＆＃13;

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

＆＃13;

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

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

3 个答案: