许多按钮在 html table 中触发一个模态

Question

使用 EJS 的 Node Express 应用程序。

我正在创建一个 table - 每个单元格都有一个按钮来触发模式。此代码在 for 循环内：

<td>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Header-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
                        </div>
                        <!-- Body -->
                        <div class="modal-body">
                            <% for(var j = 0; j < user.notifications.length; j++) { %>
                            <%= user.notifications[j] %>
                            <% } %>
                        </div>
                        <!-- Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="btn-group" role="group" aria-label="...">
                <!-- Button trigger modal -->
                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products </button><br><br>
            </div>
            </td>

一切都加载正常，呈现的 html 显示每个单元格都有自己的模态和自己的数据，但每个按钮都会触发 myModal 并且它们都被称为 myModal 所以每个按钮都从第一个单元格加载模式。

有没有办法动态创建 div id，如 myModal1、myModal2 等？

我试过了

<div class="modal fade" id="<%=user.id%> ...>

我应该换一种方式吗？

Answer 1

一个这样的方法是使用单一模式，然后 vary the modal content based on the trigger button。

发生的事情是一个事件绑定到模态，当按钮打开目标模态时触发。您仍然可以将模态内容隐藏在 table 中，事件将找到并填充模态主体。

这是一个您需要根据自己的代码进行调整的简单示例：

$(function() {

  // when the modal is shown
  $('#myModal').on('show.bs.modal', function(e) {
    var $modal = $(this);

    // find the trigger button
    var $button = $(e.relatedTarget);

    // find the hidden div next to trigger button
    var $notifications = $button.siblings('div.hidden');

    // transfer content to modal body
    $modal.find('.modal-body').html($notifications.html());
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Notifications</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>
        <div class="hidden">
          <ul>
            <li>Product one</li>
            <li>Product two</li>
            <li>Product three</li>
          </ul>
        </div>
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
      </td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>
        <div class="hidden">
          <ul>
            <li>Product three</li>
            <li>Product four</li>
            <li>Product five</li>
          </ul>
        </div>
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Subscribed Products</button>
      </td>
    </tr>
  </tbody>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Header-->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Catalog Numbers</h4>
      </div>
      <!-- Body -->
      <div class="modal-body"></div>
      <!-- Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

许多按钮在 html table 中触发一个模态

Many buttons trigger one modal in html table

html

javascript

ejs

node.js

twitter-bootstrap