实现 Twitter Bootstrap 模态框

Question

实现 Twitter Bootstrap 模态框

13

我对编程还很陌生，所以请原谅我的不熟练。

我正在制作一个网站，想要有按钮模态框。但我似乎无法使它正常工作，并且已经试验了至少几个小时。这是我在html文件中写的代码，它是从Twitter Bootstrap网站上获取的：

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

我这里有什么遗漏吗？我需要添加其他内容吗？Bootstrap网站上说要通过JavaScript调用模态框，但我不知道在哪里放置“$('#myModal').modal(options)”代码。我已经将它放到了“.html”和“.js”文件中，但都没有成功。

“.html”文件中已经有了

<script src="js/bootstrap-modal.js"></script>

除了所有其他插件之外，但是这似乎没有产生任何作用。值得注意的是，我正在本地计算机上工作。

我相信这是一个非常简单的问题，但是任何帮助都将不胜感激。

编辑：我设法让它工作了。看起来我的问题是我在引用bootstrap-modal.js时，实际上我只有bootstrap.js。我创建了一个新文件，名为boostrap-modal.js，其中包含该代码，然后它正常工作。

但是，我仍然无法获得淡入转换效果。我使用了bootstrap-transition.js文件，但仍然无法做到这一点。额外的帮助将不胜感激。

- Patrick E.

可能是重复的问题：无法使简单的Bootstrap模态框工作。 - Jim G.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andres Ilich · Accepted Answer

17

_{* 在fiddle上更新了bootstrap样式表路径，自从我写这个答案以来改变了。}

在插件正常工作之前，您需要在bootstrap-modal.js脚本文件之前包含jQuery脚本。以下是直接从Google CDN获取的脚本，您可以自由地在页面中包含它，只需确保在任何可能有的js之前包含它：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

如果您希望在页面加载时显示脚本，则只需调用该脚本，否则，您只需要在模态框按钮中具有正确的data-*属性和href参考，而这些您已经拥有：

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

您可以将所有脚本都包含在<body>标记的末尾，以加快内容加载速度，就像Twitter Bootstrap演示页面一样。

这是一个模态页面的演示： http://jsfiddle.net/3v2zg/626/

- Andres Ilich

谢谢您抽出时间回答我的问题，我非常感激。我使用了您提供的脚本，并按照您所说的将其放置在所有其他脚本之前，但仍然无法正常工作。当我使用上面提供的代码时，页面加载时模态框已经打开（而不需要点击按钮），并且对于点击“关闭”、“保存更改”或“x”按钮没有反应。当我使用您提供的代码时，模态框根本不会打开。也许我还漏掉了其他东西？ - Patrick E.

@PatrickE。您提供的代码应该可以正常工作，前提是您已经在文档中正确加载了所有脚本文件。由于模态框是通过“lauch”链接中的数据属性调用的，因此您实际上不需要为模态框提供js调用，只有在您希望在内容加载时（即自动）加载模态框时才会提供。您还缺少模态框容器内的.hide类，这就是“隐藏”模态框直到被调用的原因，因此请将其添加，例如<div class="modal hide fade" id="myModal">。 - Andres Ilich

非常感谢！这个有用，而且我很高兴，因为我的网站经常使用模态框。我是一个编码新手，但我想我会开始编写一个网站，即使它不好，我也会一路学习。我认为这样做更好，因为在制作网站之前学习如何编码可能会显得相当困难。无论如何，看起来问题是脚本文件。我目前正在解决过渡问题（使用bootstrap-transition.js文件）。渐变效果会是一个非常好的额外加分项。有什么想法吗？我需要再次添加您之前提供的ajax jquery脚本吗？ - Patrick E.

没有加载jQuery脚本，模态脚本将无法正常工作，请确保至少有一个脚本实例被包含。transition.js文件用于向bootstrap脚本添加效果，如果没有它，您的页面上就不会有任何效果，它基本上使用CSS3来完成大多数效果，因此请确保在更新的浏览器上进行测试。要在模态窗口中包含效果，请确保在其容器上包含.fade类，如下所示：<div class="modal hide fade" id="myModal">注意淡入淡出类，这是为了同样的原因而存在，即淡入淡出效果。 - Andres Ilich

终于搞定了！非常感谢！你真的很有帮助，我还担心没有人会回答我的问题，因为这个网站是我最后的选择！谢谢！ - Patrick E.