小编van*_*rie的帖子

Jquery打开远程url的Bootstrap v3模式

我有一个链接页面链接到我需要在Bootstrap模态DIV中打开的内部页面.问题是,在以这种方式加载内容时,似乎将最新版本的Bootstrap v3与jQuery v2.1.4结合使用是行不通的.我已经阅读了很多关于使用Bootstrap创建模态以及如何逐步淘汰远程内容的教程.但是必须离开才能使用jQuery,或者不是.

理论是,当你点击

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>
Run Code Online (Sandbox Code Playgroud)

应该读取data-load-remote的内容并将其注入到class中modal-body.

<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-hidden="true">&times;</button>
                <h4 class="modal-title">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

但是,当我用jQuery v2.1.4和BS v3.3 +尝试这个例子时,它所做的是打开一个带有灰色背景的模态窗口,但模态窗口的所有样式都消失了.这意味着它似乎只显示模态体div,但模态页眉div中的模态标题,漂亮的模态框架和底部按钮根本不显示.关闭该框的唯一方法是在模态框外单击.部分模态窗口

我已经找到了关于如何以这种方式打开远程URL的示例,但它们都使用过时版本的bootstrap,而不是我正在使用的版本.请问有人可以解决这个问题吗?

jquery twitter-bootstrap bootstrap-modal twitter-bootstrap-3

26
推荐指数
2
解决办法
9万
查看次数