多个模态在一个页面

Question

我想在一个页面中获得多个模态（弹出事件）。

一个按钮可以让你看到你有什么主题，当你点击它时，一个模式将打开并显示你在什么时间以及作业是什么。

另一个按钮可以让你添加新的数据，并打开一个模式，让你添加新的数据。

首先创建新的数据模式。

但是现在我遇到了这样的问题，当我点击主题按钮时，新数据按钮的模态将出现，我不知道为什么。

这是代码：

<script type="text/javascript"> 
      $(document).ready(function(){ 
      $(".btn").click(function(){ 
     $("#myModal1").modal('show'); 

     }); 
      }); 
     </script> 

模式之一！

<a href="#myModal1" class="btn btn-lg btn-primary">Nieuwe taak toevoegen</a> 
         <div id="myModal1" class="modal fade"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h4 class="modal-title">Nieuwe taak toevoegen</h4> 
         </div> 
         <div class="modal-body"> 
          <table> 
          <tr> 
           <form id="form1" action="<?php $_SERVER['PHP_SELF'];?>" method="POST"> 
          <td>Naam voor afspraak:</td> 
           <td><input type="text" name="afspraak"></td></tr> 
          <tr></tr> 
          <tr> 
           <td></br>Omschrijving: </td> 
           <td><textarea cols="34" rows="5" name="description"></textarea></td> 
          </tr> 
          <tr></tr> 
        <tr> 
         <td>Datum:</td> 
             <td> 
              <select name="day"> 
               <?php 
                   //Selecteerd als eerste de dag van vandaag 
                echo "<option selected>" .Date('d')."</option>"; 
                 for($i = 1; $i <=31; $i++) 
                 { 
                  echo '<option value="'.$i.'">'.$i.'</option>'; 
                 } 
                 ?> 
                </select> 
                <select name="month"> 
                 <?php 
                   //Selecteerd als eerste de maand van vandaag 
                  echo "<option selected>" .Date('m')."</option>"; 
                   for($i = 1; $i <=12; $i++) 
                   { 
                    echo '<option value="'.$i.'">'.$i.'</option>'; 
                   } 
                 ?> 
                </select> 
                <select name="year"> 
                 <?php 
                   //Selecteerd als eerste de jaar van vandaag 
                  echo "<option selected>" .Date('Y')."</option>";                 
                   for($i = date("Y"); $i <= 2050; $i++) 
                   { 
                    echo '<option value="'.$i.'">'.$i.'</option>'; 
                   } 
                 ?> 
                </select> 
               </td> 
              </tr> 
              <tr></tr> 
              <tr> 
               <td>Tijd: </td> 
               <td><input type="time" name="tijd" value="<?php echo date('H:i:s');?>"></td> 
              </tr> 
         </table> 
         </div> 

         <div class="modal-footer"> 
          <!--- <button type="submit" class="btn btn-default" data-dismiss="modal" value="Toevoegen" name="submit">Toevoegen</button>---> 
               <td><input type="submit" value="Toevoegen" name="submit"></td> 
          <!--- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          <button type="button" class="btn btn-primary">Save changes</button>---> 
         </div> 
        </div> 
       </div> 
       </form> 

和模式2

echo "<a href='#myModal2' class='btn btn-primary' id='test'>$name</a> 
           <div id='myModal2' class='modal fade'> 
            <div class='modal-dialog'> 
             <div class='modal-header'> 
              <h4 class='modal-title'>$name</h4> 
             </div> 
             <div class='modal-body'> 
              <p><td>Datum: $datum </br /> Tijd: $tijd </br /> Opdracht: $huiswerk</td> 
             </div> 
             <div class='modal-footer'> 
              <button type=button' class='btn btn-default' data-dismiss='modal'>Sluiten</button> 
             </div> 
            </div> 
           </div>"; 

我想有一些错误的.btn，而且它会只接受一个BTN。但我不知道如何使它可以多次使用.btn。

.btn2不起作用。

Answer 1

在你的js中，你正在调用modal.show（）方法。显示模态的值永远不会改变。

应该是这个样子

$(".btn").click(function(){ 
    var id = $(this).attr('id'); 
    $(id).modal('show'); 
}); 

但是你可以避开JS的东西，并使用data-toggle="modal" HTML5属性您的链接。如此处所示http://getbootstrap.com/javascript/#modals。