Bootstrap 模态建议答案

【问题标题】：Bootstrap Modal SuggestionBootstrap 模态建议
【发布时间】：2013-11-04 20:16:55
【问题描述】：

我在我的主 html 页面正文中使用了 7 次以下代码将 html 内容加载到 twitter-bootstrap 模式中。

 <div class="modal-body">
          <iframe width="900px" height="380px" frameborder="0" scrolling="no" allowtransparency="true" src="index.html#"></iframe>
 </div>

加载此页面大约需要 30 秒，因为它首先尝试加载所有 iframe 内容，然后在每个模式中最终加载页面。我尝试使用 jquery 加载，以便 iframe 内容加载到模态 on.click 中，但是当模态打开时，该模态的内容需要永远加载。有什么建议？谢谢

【问题讨论】：

您实际上是在问我们如何让 8 个网页同时快速加载。

标签： jquery twitter-bootstrap iframe

【解决方案1】：

您可以使用 $(document).ready() 事件将 iframe 附加到 modal-body。

$(document).ready(function() {
    $("#modal-body").append("[insert iframe here]")
});

【讨论】：

追加只是保持分层内容。

【解决方案2】：

不要使用iframes，使用Bootstrap API [依赖于$.load()]：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

【讨论】：

这是加载页面最快的解决方案，但是模态 html 内容仍然加载缓慢，我想这只是我的内容来自哪里的性能问题。

【解决方案3】：

您为什么要尝试一次加载这么多 iframe？尝试将该内容加载到 DOM 中的隐藏容器中。

【讨论】：