21

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

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

4

2 回答 2

23

首先，远程数据必须满足同源策略。如果您对此不满意，那么之后的一切都会失败（如果您尝试加载外部 URL，请参阅Twitter Bootstrap external URL's not working）。

有两种方法可以使用 Bootstrap 数据 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>是每个可以有不同的远程 url <a>，但仍然只使用一个模式。在您有多种方式启动具有相同内容的模式的情况下，使用data-remote属性可能更有利。然后，无论什么启动它（甚至是 JS 调用），它都会始终如一地提供相同的远程内容，而不必在所有调用方法中复制该信息。

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

JSFiddle

modal 正文中的内容是远程 html。

于 2012-08-28T15:15:33.103 回答
8

我在 JSFiddle 上放置了一个工作示例，该示例说明了如何使用链接打开包含远程 URL（同源）的引导模式。它几乎是来自twitter 的引导文档的逐字复制粘贴，稍作修改以使其适用于远程 URL。

它只是归结为将href属性指向您要打开的 URL 和用作模式窗口的 DIV 处的data-target属性。

JSFI在这里闲逛

这里的代码相同：

<!-- Button to trigger modal -->
<a href="/matt_hwy1/uEQEP/4/show/" data-target="#myModal" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Test Header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>​
于 2012-11-26T18:57:04.940 回答