javascript - 从远程页面到 Bootstrap Modal 的内容

Question

好吧，我的问题是当我执行以下操作时:

<a href="playerdetails.php?player=99VY9JR8" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>

<!-- 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>

打印 playerdetails.php 回显但出于某种原因它删除了我的 Bootstrap 控件。有人可以告诉我为什么这样做以及如何解决它吗？我已经尝试获取默认的 Bootstrap 模态模板，它仍然显示 playerdetails.php 回显，但它删除了我对模态的所有控件。

我正在寻找的控件是这些:

Answer 1

要使这些控件发挥作用，您需要为它们提供标记，bootstrap 不会自动将它们添加到模式中。如果您可以修改 playerdetails.php 的输出，只需在其中添加标记...例如

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Modal title</h4>
</div>

但是，自 v3.3.0 以来，Bootstrap 已弃用远程选项，并在 Bootstrap 4 中将其全部删除。相反，他们建议使用客户端模板或数据绑定(bind)框架，或自己调用 jQuery.load

如果您调用 jQuery.load你自己可以做这样的事情:

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <!-- load contents here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

定义你的按钮

<button class="btn btn-lg btn-primary btn-open-dialog">Launch Demo Modal</button>

并绑定(bind)一个 jQuery 点击事件到它来加载你的播放器

$('.btn-open-dialog').on('click', function(){
    $('#myModal .modal-body').load('playerdetails.php?player=99VY9JR8', function(){
        /* load finished, show dialog */
        $('#myModal').modal('show')
    });
});