如何使用 jQuery 和 Bootstrap 在文档中创建多个模式？答案

【问题标题】：How to create multiple modals in a document using jQuery and Bootstrap?如何使用 jQuery 和 Bootstrap 在文档中创建多个模式？
【发布时间】：2019-01-28 04:58:04
【问题描述】：

以下函数只能打开一个模式，因为它使用元素ID。

如何扩展此功能以打开多个模态？

HTML / PHP 部分代码（注意应该打开模型）

$getUsers = 'SELECT * FROM users';
  $result         = $pdo->prepare($getUsers);
  $result->execute();
  while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
      if ($row['usergroup'] === "Admin") {
        echo "<tr class='table-danger'>";
      } else {
        echo "<tr>";
      }
      echo "<td><center>" . $row['username'] . "</center></td>";
      echo '<td><center><a href="javascript:void(0);" data-href="php/userInfo.php?id='.$row['user_id'].'" id="openUserInfoModal">View</a></center></td>';
      echo "</tr>";
}

模态

<div class="modal fade" id="userInfoModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Info</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div id="userModalBody" class="modal-body">

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

Javascript

$(document).ready(function() {
  $('#openUserInfoModal').on('click',function(){
      var dataURL = $(this).attr('data-href');
      $('#userModalBody.modal-body').load(dataURL,function(){
          $('#userInfoModal').modal({show:true});
      });
  });
});

再次，显示的第一行，您可以单击a href，它将打开模式并显示用户信息。在第一行之后，单击 a href 什么也不做，也不会打开模态框。

此外，如果您删除第一行/删除用户，而第二行现在成为第一行，您可以单击 a href，它将显示用户数据。

我真的不确定是什么导致了这个问题，但感谢您的帮助。

【问题讨论】：

ID 在 HTML 中是唯一的。在 PHP 代码中，您似乎有一个循环生成具有相同 ID 的 HTML 元素。
还有一个众所周知的 UI 原则，你不应该同时打开多个模式对话框。
@JaredSmith - 我不想同时打开多个模式对话框。
@Russell 如果您想使用 ajax 加载 int 内容，这将有所帮助，那么您只有 1 个模态包装器。如果它从未看过，则在填写 dom 时没有用处。@987654321 @

标签： javascript php jquery html

【解决方案1】：

原因是您复制了a 元素的id。因此，当您单击其中任何一个时，jQuery 实际上只使用第一个。因此，您需要更改它，而不是使用 id，而是使用类来打开模式。

PHP

$getUsers = 'SELECT * FROM users';
  $result         = $pdo->prepare($getUsers);
  $result->execute();
  while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
      if ($row['usergroup'] === "Admin") {
        echo "<tr class='table-danger'>";
      } else {
        echo "<tr>";
      }
      echo "<td><center>" . $row['username'] . "</center></td>";
      echo '<td><center><a href="javascript:void(0);" data-href="php/userInfo.php?id='.$row['user_id'].'" class="openUserInfoModal">View</a></center></td>';
      echo "</tr>";
}

jQuery

$(document).ready(function() {
  $('.openUserInfoModal').on('click',function(){
      var dataURL = $(this).attr('data-href');
      $('#userModalBody.modal-body').load(dataURL,function(){
          $('#userInfoModal').modal({show:true});
      });
  });
});

【讨论】：