Jquery打开远程url的Bootstrap v3模式

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

理论是，当你点击

View 72 

应该读取data-load-remote的内容并使用类modal-body注入div。

 
 
 
 
 × 
Event
 
 
 
Loading...
 
 
 Close Save changes 
 
  

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

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

Answer 1

所以基本上，在jquery中我们可以做的是使用load函数加载href属性。 这样我们就可以在标签中使用url并将其加载到modal-body中。

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

Answer 2

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

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

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

 Click me 

那是.modal-content div，而不是.modal-body 。 如果你想将内容放在.modal-body那么你需要使用自定义javascript。

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

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

HTML链接/按钮

 Click me 

jQuery的

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

Answer 3

远离Javascript并使用php的同一问题的不同视角：

 LINK 
 
 
 
 × 
Title
 
 
  
 
 Close 
 
 
  

并在remote.php文件中放入您的基本html源代码。

Answer 4

e.relatedTarget.data('load-url'); 不行
使用dataset.loadUrl

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

Answer 5

如果在jQuery中使用@worldofjr答案，则会收到错误：

e.relatedTarget.data不是一个函数

你应该使用：

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

不是e.relatedTarget如果被$(..)包裹

我在最新的Bootstrap 3中收到错误，使用这种方法后它没有任何问题。