Question

我刚刚发现了bootstrap-modal.js，并喜欢用户如何点击链接，在弹出窗口中填写表单然后提交更改。我的问题是：我可以在一个页面上有多个这样的实例吗？

我有一个从数据库中获取并在页面上显示的名称列表。用户可以根据需要添加或删除它们。我想在每个名字旁边放置一个“编辑”链接。当用户点击“编辑”时，它会加载一个弹出窗口，名称将出现在文本框中进行编辑，然后他们就可以提交更改。我无法弄清楚如何使用模态实现这一点。当我实现它时，所有弹出的“编辑”链接都会显示列表中的第一个名称，而不是我点击的名称。有没有办法为每个名字分别设置弹出窗口？我做了一堆搜索并玩了代码（我对JS一无所知）。并且无法弄清楚如何实现这一目标。我在我的网站上使用PHP。任何帮助表示赞赏！谢谢！

Answer 1

为此，我将有一个模态并动态填充名称字段和一个隐藏字段，用于存储表单提交的ID。没有看到你的代码，这样的东西可能会起作用：

$('.modal-link').click(function(e) {
    e.preventDefault();
    $('#form-modal').modal('show');
    $('#form-modal-name-field').val($(this).attr('data-name'));
    $('#form-modal-id-field').val($(this).attr('data-id'));
});

然后您的HTML将是这样的：

<ul>
    <li><a href="#" data-id="1" data-name="Name1" class="modal-link">Edit Name 1</a></li>
    <li><a href="#" data-id="2" data-name="Name2" class="modal-link">Edit Name 2</a></li>
</ul>

显然这很粗糙，但它应该给你一个想法。

可以动态地在同一页面上多次使用bootstrap-modal.js吗？

1 个答案: