0

我尝试了很多在这里找到的解决方案来实现我的目标，但不幸的是，这些似乎都不适用于我想要的。

我有一个（比方说）用户列表，通过循环从 MySQL 数据库加载。现在我想要一个用于每个用户名的按钮，它可以打开一个带有附加信息的模式。

该列表类似于：

<li><a class='btn btn-default' data-toggle='modal' data-target='myModal' href='user.php?userid=1'>User 1</a></li>
<li><a class='btn btn-default' data-toggle='modal' data-target='myModal' href='user.php?userid=2'>User 2</a></li>

在模式内部，应该运行另一个 MySQL 查询以根据传递的变量（即 userid=1）从数据库中获取更多数据。

我现在将#myModal 的代码放在哪里？如果我将它完全（或部分）放在 user.php 中，则会显示模态背景，但不会显示模态。如果我用我的链接将它放在文件中的某个位置，它不会加载远程文件。此外，我无法动态更改模式标题（应为“用户 1”）。

然后再次单击链接时重新加载其他用户数据存在问题。

谁能给我一些关于如何做到这一点的提示？

4

1 回答 1

2

将 ID 为 myModal 的 Modal div 放在列表所在的同一页面上，如下所示：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

然后在远程 user.php 中插入模态对话框的其余部分。像这样：

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Data review</h4>

    </div>
    <div class="modal-body">
    <! -- CONTENT HERE -->

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

    </div>
</div>
<!-- /.modal-content -->

最后，要使多个模态正常工作，请添加以下脚本：

 <script>
$("div[id$='Modal']").on('hidden.bs.modal',
    function () {

        $(this).removeData('bs.modal');
    }
);
</script>

那应该这样做。现在更改标题应该是微不足道的。

于 2013-11-08T09:12:51.227 回答