在Bootstrap模式窗口中打开远程内容 [英] Open remote content in the Bootstrap modal window

问题描述

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

All I need is a simple example in how to open a remote content into a Twitter Bootstrap modal window.

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

I'm using Bootstrap v2.0.4 and I just can't get it to work. I can open regular modal windows, but I can't make it open a remote file inside it.

推荐答案

首先，远程数据必须满足相同的原始策略.如果您不满意，此之后的所有操作都会失败(如果您尝试加载外部URL，请参阅 Twitter Bootstrap外部URL不起作用).

First, remote data must fulfill the same origin policy. If you're not satisfying that, everything after this is going to fail (if you are trying to load external URL's, see Twitter Bootstrap external URL's are not working).

有两种方法可以通过Bootstrap数据API将远程内容加载到模式中.也就是说，要么在要触发模式的<a>元素中指定要加载的远程URL，要么在模式的标记中指定URL.

There are two ways to accomplish loading remote content into a modal with the Bootstrap data-api. Namely to either specify the remote url to load in the <a> element which triggers the modal or to specify the url in the modal's markup.

在前一种情况下，人们使用 href 属性:

In the former, one uses the href property:

<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，但仍仅使用单个模式.在您有多种方法启动具有相同内容的模态的情况下，使用数据远程属性可能更有利.然后，无论启动它是什么(甚至是JS调用)，它都将始终如一地提供相同的远程内容，而不必在所有调用方法之间重复该信息.

The advantage of specifying it in the <a> element is that one could have a different remote url for each <a>, yet still only use a single modal. Using the data-remote property might be more advantageous in situations where you have multiple means of launching a modal with the same content. Then, no matter what launches it (even a JS call), it would consistently provide the same remote content, without having to duplicate that information across all the methods of invocation.

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

Here is a demo using the latter method:

模式主体中的内容是远程html.

The content in the body of the modal is the remote html.

这篇关于在Bootstrap模式窗口中打开远程内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！