Jquery打开远程url的Bootstrap v3模式

Question

我有一个指向内部页面的链接页面，我需要在 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>

data-load-remote 的内容应该被读取并注入(inject)到 modal-body 类的 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 中的底部按钮根本不显示。关闭该框的唯一方法是在模式框外部单击。

我已经找到了有关如何以这种方式打开远程网址的示例，但它们都使用过时的 bootstrap 版本，而不是我正在使用的版本。有人可以解释一下吗？

Answer 1

基本上，在 jquery 中我们可以做的是使用 load function 加载 href 属性。 。这样我们就可以使用<a>中的url了标记并将其加载到模态体中。

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