Jquery打开Bootstrap v3模式的远程url

我有一页链接到内部页面,我需要在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">&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>

然而,当我用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'));
});

原文地址：https://www.jb51.cc/jquery/180449.html