Bootstrap 的远程模式对话框不起作用答案

【问题标题】：Bootstrap's Remote Modal Dialog Not WorkingBootstrap 的远程模式对话框不起作用
【发布时间】：2012-10-19 22:11:43
【问题描述】：

我在使用来自 Twitter Bootstrap api 的远程模式对话框时遇到问题。

我正在尝试使用远程 html 页面中的内容加载模式对话框。我有两页，一页包含按钮 (modal-remote.html)，另一页包含单击按钮时我希望显示的内容 (modal-target.html)。

modal-remote.html：

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">
    Launch demo modal</a>

</html>

这是我的目标（或远程）页面代码

modal-target.html：

<html>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

    <div class="modal" id="myModal" 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 header</h3>
      </div>
      <div class="modal-body">
        <p>The quick brown fox jumps over the lazy dog. </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

它们在同一个目录中。当我单击按钮时，什么也没有发生。有人知道我在做什么错吗？非远程模式对话框工作得很好，我只是不知道如何使用远程功能。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您应该仔细阅读modal documentation。

如果提供了远程 url，内容将通过 jQuery 的 load 方法加载并注入到 .modal-body 中

你的文件应该更像这样：

模态远程.html：

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">
    Launch demo modal</a>

<div class="modal hide" id="myModal" 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 header</h3>
      </div>
      <div class="modal-body">
        <!-- content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

模态目标.html：

<p>The quick brown fox jumps over the lazy dog. </p>

【讨论】：

注意，现在使用 bootstrap3，内容将被注入到 模态元素的根。见stackoverflow.com/a/18387625/553073 和document

【解决方案2】：

从 Bootstrap v3.30 开始，remote 选项已弃用。见Here。

所以推荐使用远程内容的方法是使用jquery.load() 方法。

例子：

$("modal").load("remote_content.html");

【讨论】：