javascript - Bootstrap 模式数据远程在 Chrome 中不起作用

Question

我已经为除 Chrome 之外的所有浏览器工作了 bootstrap modal data-remote。显示背景但不显示模态框本身。

父页面.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 -->

我已经尝试将远程数据放入 <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

---

更新

根据对答案的评论，谷歌浏览器不允许来自文件协议(protocol) (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