Question

我陷入了一个小而奇怪的问题。我的页面上有两个模态，我想在页面加载时加载第一个模态，我完成了单击按钮并打开模态的代码，但同时出现了两个模态。它具有从左到右打开的效果，我想保留它，所以我在jQuery代码中添加了该类。我只想加载具有id =“ ModalLogin”的模式。如您所见，当单击按钮时，两种模态加载。以下是代码段。请帮忙。

$('.btn').click(function() {
  $('.modal')
    .prop('class', 'modal fade') // revert to default
    .addClass($(this).data('direction'));
  $('.modal').modal('show');
});

<!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">
      <link href="https://www.topconsumerreviews.com/new-common-code/new-style.css" rel="stylesheet" type="text/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>
      <style type="text/css">
        

      </style>
   </head>
   <body>
      <div class="container">

        <ul class="product-rankings-font" style="list-style: none;padding-left: 18px;padding-bottom: 10px;padding: 10px;">
                  <li>Select2 </li>
                  <!-- <li><a href="#modal" class="btn go">Activate Modal</a></li> -->
                  <li style="text-align: center;padding-top: 5px;"><a class='btn btn-primary btn clos' style="width: 160px;" id="bty" data-direction='left'>bty</a></li>
                  </ul>

      <!---- Forgot Password Popup --->
      <div class="modal fade" id="ModalForgotPassword" role="dialog">
         <div class="modal-dialog" style="width: 15%;">
            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Slider 2</h4>
               </div>
               <div class="modal-body">
                  <form>
                     <div class="form-group">
                        <button class="btn btn-primary">Option 4</button>                       
                     </div>
                     <div class="form-group">
                        <button class="btn btn-primary">Option 5</button>                       
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
      <!---- Forgot Password Popup --->
      <!---- Login Popup --->
      <div class="modal fade" id="ModalLogin" role="dialog">
      <div class="modal-dialog" style="width: 15%;">
         <!-- Modal content-->
         <div class="modal-content">
          <div class="modal-header" style="font-size: 18px;text-align: center;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" style="color: black;">Text Sample 1</h4>
        <h4 class="modal-title" style="color: black;">Text Sample 2</h4>
      </div>

       <div class="modal-body" style="font-size: 16px">
        <form action="comparelist.php" method="post">
        <ul id="answers-type1" class="myclass"  style="list-style: none;padding-right: 10px;padding-left: 10px;">
          <li class="module form-check-label" style="background: #668693;" value="Listol" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"><span>Option 1</span></li>
          <li class="module form-check-label" style="background: #668693;"><span><a href="page2.html">Option 2</a></span></li>
          
          
        </ul>
      
      </div>
          
         </div>
      </div>
    </div>
      <!---- Login Popup --->








   </body>
</html>

Answer 1

我想提供另一种使用模式的方式：纯CSS。

这里是参考：click here

这个想法是您不需要任何js，每个模式都将在具有ID的div包装器中。像这样：

<div id="modalWrapper">

然后您将在任何需要的地方都有一个超链接

<a href="#modalWrapper">

诀窍在于CSS- 您最初将模态的位置设置为绝对且不可见（左：-999em）然后使用目标选择器将模式带到中心：

#modalWrapper:target {
left:0;
transition:etc..
}

当您这样做时-您将仅通过按钮打开所需的模态。

希望这会对您有所帮助。我的第一个答案

打开一个模式并禁用另一个模式页面加载

1 个答案: