0

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

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

4

1 回答 1

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>

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

于 2013-06-15T00:17:54.037 回答