Question

我已经在我的网络应用程序中成功添加了来自外部链接的模态，但现在当我单击按钮启动模式时，将启动上一个模式的内容。我希望每次都重新加载。

这是启动模态的按钮。

<button href="/forum/flag_post/0838024b-f210-4f4d-ac53-fd4ade12d533"  class="btn btn-default" data-toggle="modal" data-target="#myModal">Report</button>

有像这样的多个按钮，每个按钮都有不同的href，一旦按下按钮并关闭模态，每个按钮都会弹出相同的模态内容。我不想要那个。我希望从URL中新加载模态内容。

这是模态类：

    <!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>

Answer 1

使用JQuery：

<script>
    $(document).ready(function(){
        $("#modalLinks a").click(function () {
            var addressValue = $(this).attr("href");
            $(".modalContent").load(addressValue);
        });
    });
<script>

<div id="modalLinks">
    <a href="/forum/flag_post/777b1580-572f-41a4-80c8-f2ac58ac49ad" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Report</a>
    <a href="/forum/flag_post/somewhereElse" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Somewhere</a>
    <a href="/forum/flag_post/somewhereTooFar" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Somewhere too far</a>
</div>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

这个想法是每当你点击一个链接时，JQuery就会用ajax更新模态内容。

Bootstrap模式不替换不同链接的内容

1 个答案: