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模态模板，但它仍显示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>

然而，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')
    });
});

从远程页面到Bootstrap Modal的内容

1 个答案: