Question

我对编码很陌生，所以请原谅我缺乏经验。

我目前正在制作一个网站，并希望拥有按钮模式。我似乎无法让它工作，并已经尝试了至少几个小时。这是我在我的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>

我在这里遗漏了什么吗？我需要添加其他东西吗？引导网站说“通过javascript调用模态”，但我不知道在哪里放$（'＃myModal'）。modal（选项）。我把它放在.html和.js文件中，但都没有尝试过。

.html文件已经

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

以及所有其他插件，但这似乎没有做任何事情。值得注意的是，我在计算机上本地工作。

我确信这是一个非常简单的问题，但是非常感谢任何帮助。

编辑：我设法让它运转起来。看起来我的问题是我正在寻找bootstrap-modal.js，当我真的只有bootstrap.js。我用代码创建了一个名为boostrap-modal.js的新文件，它工作正常。

然而，我仍然无法在过渡期间获得淡入淡出。我已经使用了bootstrap-transition.js文件但仍然无法将其删除。非常感谢额外的帮助。

Answer 1

_{*更新了小提琴上的bootstrap样式表路径，自从我写这个答案后它发生了变化。}

您需要在bootstrap-modal.js脚本文件之前包含jQuery脚本才能使插件正常工作，这里是直接来自googles 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>标记的末尾包含所有脚本，以加快内容加载速度，就像twitters bootstrap演示页面一样。

以下是模态页面的演示：

http://jsfiddle.net/3v2zg/626/

实现Twitter Bootstrap模式

1 个答案: