Jquery打开远程url的Bootstrap v3模式

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

理论是,当你点击

View 72

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

    

            

                ×
                
Event
            
            

                
Loading...
            
            

                Close
                Save changes
            
    

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

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

所以基本上,在jquery中我们可以做的是使用load函数加载href属性.这样我们就可以在标签中使用url 并在模态体中加载它.

Login

//JS script
$('.ls-modal').on('click', function(e){
  e.preventDefault();
  $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});

来自Bootstrap关于该remote选项的文档 ;

此选项自v3.3.0起已弃用,并已在v4中删除.我们建议使用客户端模板或数据绑定框架,或者自己调用jQuery.load.

如果提供了远程URL,则将通过jQuery的load方法一次加载内容并将其注入.modal-contentdiv.如果您正在使用data-api,则可以使用该href属性指定远程源.这方面的一个例子如下所示:

Click me

那是.modal-contentdiv,不是.modal-body.如果你想把内容放在里面,.modal-body你需要使用自定义的javascript.

所以我会以jQuery.load编程方式调用,这意味着您可以根据需要保留dismiss和/或其他按钮的功能.

要执行此操作,您可以使用带有打开模式的按钮的URL的数据标记,并使用该show.bs.modal事件将内容加载到.modal-bodydiv中.

HTML链接/按钮

Click me

jQuery的

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});