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

Open remote content in the Bootstrap modal window

本文关键字：程内容 Bootstrap 模式 窗口      更新时间：2023-09-26

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

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

首先，远程数据必须满足同源策略。如果你不满足这一点，那么之后的一切都会失败（如果你试图加载外部URL，请参阅Twitter Bootstrap外部URL不起作用）。

有两种方法可以使用Bootstrap数据api将远程内容加载到模式中。也就是说，在触发模态的<a>元素中指定要加载的远程url，或者在模态的标记中指定url。

在前者中，使用href属性：

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

在后者中，使用数据远程属性：

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

在<a>元素中指定它的好处是，每个<a>可以有一个不同的远程url，但仍然只使用一个模态。在有多种方法启动具有相同内容的模态的情况下，使用dataremote属性可能更有利。然后，无论是什么启动它（甚至是JS调用），它都会一致地提供相同的远程内容，而不必在所有调用方法中重复这些信息。

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

JSFiddle

模态主体中的内容是远程html。

我在JSFiddle上删除了一个工作示例，该示例演示了如何使用链接打开包含远程URL（同源）的引导模式。它几乎是从twitter的引导文档中逐字复制粘贴的，经过一些小的修改，使其适用于远程URLS。

它只需要将href属性指向要打开的URL，并将数据目标特性指向充当模式窗口的DIV。

JSF点击此处

此处代码相同：

<!-- 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…</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>​
相关文章：