javascript - 在 Bootstrap 模式窗口中打开远程内容

Question

我所需要的只是一个关于如何在 Twitter Bootstrap 模式窗口中打开远程内容的简单示例。

我正在使用 Bootstrap v2.0.4，但我无法让它工作。我可以打开常规模式窗口，但无法让它打开其中的远程文件。

Answer 1

首先，远程数据必须满足同源策略。如果您不满足这一点，则此后的所有操作都将失败(如果您尝试加载外部 URL，请参阅 Twitter Bootstrap external URL's are not working )。

有两种方法可以使用 Bootstrap data-api 将远程内容加载到模式中。即指定要在 <a> 中加载的远程 url触发模式的元素或在模式标记中指定 url。

在前者中，使用 href 属性:

<a data-target="#myModal" href="/remote/url" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

在后者中，使用data-remote属性:

<div class="modal fade hide" id="myModal" data-remote="/remote/url">...</div>

在 <a> 中指定它的优点元素之一是每个 <a> 可以有不同的远程 URL。 ，但仍然只使用单一模态。在您有多种方式启动具有相同内容的模式的情况下，使用 data-remote 属性可能会更有利。然后，无论什么启动它(甚至是 JS 调用)，它都会一致地提供相同的远程内容，而不必在所有调用方法中复制该信息。

这是使用后一种方法的演示:

JSFiddle

模态正文中的内容是远程 html。