我正在工作的网站上有一堆Bootstrap模态窗口,这些窗口正在加载远程内容。这是完美的工作。但是,我的老板告诉我,这些模式中的链接无法转到新页面,它们必须在模式窗口中重新加载。
我已经尝试了一些没有运气的事情。
首先,我在模态内部有模态链接
<a data-toggle='modal' class='modalBox' data-target='#largeModal'
href='link here'>Link</a>
该链接不起作用,Bootstrap.js引发此错误。
TypeError: 'undefined' is not a function (evaluating 'b.preventDefault()')
因此,我尝试将ID更改为页面上具有的其他模式窗口,并且确实在已经存在的模式窗口后面弹出。这并不是我真正需要的,但很有希望。
有没有办法解决这个问题,以便将内容加载到相同的模态窗口中?
最佳答案
正如@Chevi所建议的,最好的选择是将iframe放置在模态中。无需更改现有的页面/模式布局,因为您可以在每个klick上插入一个新的iframe。
假设您有一个 bootstrap 模态,其.modal-body
内有一个链接,那么您将需要以下内容:
$('.modal').on("click", "a", function (e) {
var target = $(this).attr('href');
$('.modal-body').html('');
$('<iframe>').attr('src', target).appendTo($('.modal-body'));
e.preventDefault();
});
这将获取所单击链接的
href
,用iframe替换.modal-body
内容,并将iframe的src
设置为链接的href。请注意,链接目标必须是可框架化的:没有框架杀手,也没有X-Frame-Options(因此无法以这种方式链接到Google!)
fiddle :http://jsfiddle.net/445eA/
关于jquery - 带有Bootstrap模式中的链接的远程内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22568286/