jquery – Bootstrap模式中带链接的远程内容

前端之家收集整理的这篇文章主要介绍了jquery – Bootstrap模式中带链接的远程内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在一个正在加载远程内容的网站上有一堆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.

鉴于你有一个带有.modal-body内部链接的bootstrap模态,你需要这样的东西:

$('.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(因此以这种方式链接到谷歌将无效!)

小提琴:http://jsfiddle.net/445eA/

猜你在找的jQuery相关文章