引导模式数据远程在 Chrome 中不起作用

Question

我已经为除 Chrome 之外的所有浏览器提供了引导模式数据远程工作。背景显示但不显示模态本身。

parentPage.html

<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/ball.gif" alt="Add Account"/></a>
<div class="modal fade" id="myModal" tabindex="-1" data-remote="./popups/remotePage.html" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
</div>

remotePage.html

<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
            One fine body...
      </div>
      <div class="modal-footer">Footer
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->

我已经尝试将 data-remote 放入 <a> 标记中。

我错过了什么？

Answer 1

请改用此代码。假设您使用的是 Twitter Bootstrap 3。

parentPage.html

<a href="./popups/remotePage.html" data-toggle="modal" data-target="#myModal"><img src="images/ball.gif" alt="Add Account"/></a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog">
    <div class="modal-content">
    </div>
</div>
</div>

remotePage.html

<div class="modal-header">Header</div>
<div class="modal-body">
    One fine body...
</div>
<div class="modal-footer">Footer</div>

别忘了目录结构是这样的：

parentPage.html
popups
   remotePage.html

---

更新

根据回答的 cmets，Google Chrome 不允许将来自文件协议 (file://) 的 XMLHttpRequest 作为安全措施。您有两种选择。

一个是将您的文件托管在 HTTP 服务器中。如果您使用的是 Windows，请使用 WAMP 或 XAMPP。

第二个选项是在 Chrome 中禁用网络安全模式，但不推荐这样做

chrome.exe --disable-web-security

供您参考：Allow Google Chrome to use XMLHttpRequest to load a URL from a local file