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

Question

我正在处理的网站上有一堆正在加载远程内容的 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 更改为页面上的不同模态窗口，它确实会在已有的模态窗口后面弹出。这并不完全是我所需要的，但很有希望。

有没有办法解决这个问题，以便内容可以在同一个模式窗口中加载？

Answer 1

正如 @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。

请注意，链接目标必须是可框架的:没有framekillers，没有X-Frame-Options(因此以这种方式链接到google将不起作用!)

fiddle :http://jsfiddle.net/445eA/