的更新

Question

我有除了Chrome之外的所有浏览器的bootstrap模态数据远程工作。背景显示但不是模态本身。

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

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

的更新

根据对回答的评论，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

bootstrap模态数据远程无法在Chrome中运行

1 个答案:

的更新