实现Twitter引导模式

我对编码相当陌生，请原谅我缺乏经验

我目前正在制作一个网站，并希望有按钮模态。我似乎无法让它工作，并且已经用它进行了至少几个小时的实验。这是我在html文件中所写的内容，该文件取自Twitter引导网站：

<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（选项）放在哪里。我把它放在了.html和.js文件中，但这两种尝试都不起作用

.html文件已经存在

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

与所有其他插件一起，但这似乎没有起到任何作用。值得注意的是，我正在本地使用我的计算机

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

编辑：我设法让它工作起来。看起来我的问题是我在寻找bootstrap-modal.js，而实际上我只有bootstrap.js。我用代码创建了一个名为boostrap-modal.js的新文件，它运行良好

然而，我仍然无法获得淡入过渡。我已经使用了bootstrap-transition.js文件，但似乎仍然无法下载。额外的帮助将不胜感激。

*更新了小提琴上的引导样式表路径，自从我写下这个答案后，它发生了变化

您需要在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>

您可以在

标记的末尾包含所有脚本，以便更快地加载内容，与twitters bootstrap演示页面的方式相同

以下是模式页面的演示：

---

感谢您抽出时间回答我的问题，我非常感谢。我拿了你提供的剧本，像你说的那样，把它放在身体末端所有其他人之前，但它仍然不起作用。当我使用上面提供的代码时，发生的情况是，加载页面时，模式已经打开（没有单击按钮），并且对单击“关闭”、“保存更改”或“x”按钮没有响应。当我使用您提供的代码时，模态就不会打开。也许我错过了别的什么？@PatrickE。如果您在文档中正确加载了所有脚本文件，那么上面提供的代码应该可以正常工作。由于模态是由“lauch”链接中的数据属性调用的，因此您实际上不需要为模态提供js调用，仅当您希望在加载内容时加载模态（如中所示，自动加载）时才会提供js调用。您还缺少模态容器中的

.hide

类，这就是在调用之前“隐藏”模态的原因，因此也需要添加该类，例如

，非常感谢！这是工作，我真的很高兴，因为我的网站功能模态很多。我是一个编程新手，但我想我会开始编写一个网站，即使它不好，我会一路学习的。我觉得这样更好，因为在创建网站之前学习如何编写代码似乎是一项相当艰巨的任务。不管怎样，看起来问题出在脚本文件上。我目前在转换方面遇到了问题（使用bootstrap transition.js文件）。过渡淡出将是一个非常好的加号。有什么想法吗？我需要再次添加前面提供的ajax jquery脚本吗？如果没有加载jquery脚本，模式脚本将无法运行，因此请确保包含一个脚本实例。js文件用于向引导脚本添加效果，如果没有它，您的页面将不会有任何效果，它基本上使用CSS3实现大多数效果，因此请确保在更新的浏览器上进行测试。要在模式窗口中包含效果，请确保在其容器中包含

.fade

类，如下所示：

注意fade类，它也是出于同样的原因出现在那里的，用于淡入效果。终于让它工作了！非常感谢！你帮了我大忙，我担心没有人会回答我的问题，因为这个网站是我最后的选择！谢谢，可能的副本

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