Javascript 在 Bootstrap 模式窗口中打开远程内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12152101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open remote content in the Bootstrap modal window
提问by fackz
All I need is a simple example in how to open a remote content into a Twitter Bootstrap modal window.
我只需要一个简单的示例，说明如何将远程内容打开到 Twitter Bootstrap 模式窗口中。
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.
我正在使用 Bootstrap v2.0.4，但我无法让它工作。我可以打开常规的模态窗口，但我不能让它打开其中的远程文件。
回答by merv
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).
首先，远程数据必须满足同源策略。如果您对此不满意，此后的所有内容都将失败（如果您尝试加载外部 URL，请参阅Twitter Bootstrap 外部 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.
有两种方法可以使用 Bootstrap 数据 API 将远程内容加载到模式中。即指定要加载到<a>触发模态的元素中的远程 url或在模态标记中指定 url。
In the former, one uses the hrefproperty:
在前者中，使用href属性：
<a data-target="#myModal" href="/remote/url" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
In the latter, one uses the data-remoteproperty:
在后者中，使用data-remote属性：
<div class="modal fade hide" id="myModal" data-remote="/remote/url">...</div>
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-remoteproperty 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.
在<a>元素中指定它的优点是每个 可以有不同的远程 url <a>，但仍然只使用一个模式。在您有多种方式启动具有相同内容的模式的情况下，使用data-remote属性可能更有利。然后，无论是什么启动它（甚至是 JS 调用），它都会始终如一地提供相同的远程内容，而不必在所有调用方法中复制该信息。
Here is a demo using the latter method:
这是使用后一种方法的演示：
JSFiddle
JSFiddle
The content in the body of the modal is the remote html.
模态正文中的内容是远程 html。
回答by Matt Schwartz
I dropped a working example here on JSFiddle that illustrates how to use a link to open a bootstrap modal containing a remote URL (of the same origin). It's an almost verbatim copy-paste from twitter's bootstrap docswith some minor modifications to make it work for remote URLS.
我在 JSFiddle 上放了一个工作示例，它说明了如何使用链接打开包含远程 URL（同源）的引导模式。它几乎是从twitter 的引导程序文档中逐字复制粘贴的，并进行了一些小的修改以使其适用于远程 URL。
It just comes down to pointing the hrefattribute to the URL you want to open and the data-targetattribute at the DIV that acts as the modal window.
归结为将href属性指向您要打开的 URL 以及作为模式窗口的 DIV 中的data-target属性。
Same code here:
这里的代码相同：
<!-- 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>?
