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

Question

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

我正在使用Bootstrap v2.0.4而我无法让它工作.我可以打开常规模态窗口,但我不能让它打开它里面的远程文件.

Answer 1

首先,远程数据必须符合相同的原始策略.如果您不满意,那么此后的所有内容都将失败(如果您尝试加载外部URL,请参阅Twitter Bootstrap外部URL不起作用).

使用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>

在后者中,使用数据远程属性:

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

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

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

的jsfiddle

模态体内的内容是远程html.

Answer 2

我在JSFiddle上放了一个工作示例,说明如何使用链接打开包含远程URL(相同来源)的引导模式.这是来自twitter的bootstrap文档的几乎逐字复制粘贴,稍作修改,使其适用于远程URL.

它只是将href属性指向您要打开的URL以及DIV中用作模式窗口的data-target属性.

JSFIddle在这里

这里的代码相同:

<!-- 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>?