Question

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

我有一个（比方说）用户列表，通过循环从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）从DB获取更多数据。

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

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

有人能提供一些关于如何做到这一点的提示吗？

Answer 1

将带有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>

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

再次启动模态中的Bootstrap 3远程内容

1 个答案: