我正在工作的网站上有一堆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/

10-11 23:26
查看更多