在 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>

在后者中，使用 data-remote 属性:

In the latter, one uses the data-remote property:

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

在 <a> 元素中指定它的好处是每个 <a> 可以有不同的远程 url，但仍然只使用单模态.在您有多种方式启动具有相同内容的模式的情况下，使用 data-remote 属性可能更有利.然后，无论是什么启动它(甚至是 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:

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

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

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