Question

使用EJS节点表达应用程序。

我正在创建一个表 - 每个单元格都有一个触发模态的按钮。这段代码在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。

事件是绑定到模态的，当按钮打开目标模态时会触发该模态。您仍然可以隐藏表格中的模态内容，事件将在其中找到并填充模态正文。

以下是一个简单的示例，您需要适应您的代码：

import re
from datetime import datetime

text = "Campaign on 01.11.2015"

match = re.search(r'\d{2}.\d{2}.\d{4}', text)
date = datetime.strptime(match.group(), '%d.%m.%Y').date()
print str(date).replace("-", "")
20151101

$(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());
  })
});

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

1 个答案: