我有一页链接到内部页面,我需要在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>
数据加载远程的内容应该被读取并注入到具有类模态的div中.
<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">×</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>
然而,当我用jQuery v2.1.4和BS v3.3尝试这个例子时,它做的是打开一个带有灰色背景的模态窗口,但是所有的模态窗口的样式都没有了.这意味着它似乎只显示模态身体div,但是模态标题,模态框和底部按钮在模态页脚div中根本不显示.关闭框的唯一方法是在模式框以外单击
我已经发现了关于如何以这种方式打开远程URL的例子,但是他们都使用过时的引导版本,而不是我正在使用的版本.任何人都可以点灯吗?
解决方法
所以基本上,在jquery中我们可以做的是加载这样的href属性.这样我们可以使用< a>在模态中标记和加载.
<a href='/site/login' class='ls-modal'>Login</a>
//JS script
$('.ls-modal').on('click',function(e){
e.preventDefault();
$('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});