从远程页面到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回显，但由于某些原因，它将删除我的引导程序控件。 谁能告诉我为什么这样做以及如何解决？ 我已经尝试获取默认的引导程序模版模板，但它仍然显示playerdetails.php但是它删除了我对playerdetails.php所有控件。

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

Answer 1

为了使这些控件起作用，您需要为其提供标记，引导程序不会自动将其添加到模态中。 如果您可以修改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>

但是，Bootstrap从v3.3.0开始不推荐使用远程选项，并在Bootstrap 4中将其全部删除。相反，他们建议使用客户端模板或数据绑定框架，或者自己调用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>

并绑定一个jQuery click事件以加载播放器

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