javascript - Bootstrap 模态示例

Question

我正在使用 twitter bootstrap js 来实现模态...... 我使用了在线示例..... 将 html、CSS 和 js 代码复制到 fiddle 中.... 但我没有看到任何输出....

http://jsfiddle.net/nJ6Mw/

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <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>

Answer 1

您缺少启动模态的内容。您可以添加一个链接以使用 data-target 属性中引用的模态 ID 打开它，或者将 href 目标设置为模态 div:

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

您可以使用 javascript 将模态 div 设置为模态目标，也可以打开和关闭它。

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
...
$('#myModal').modal(options)  <-- check the bootstrap site for possible options values.
$('#myModal').modal('show')
$('#myModal').modal('hide')

为了完成这项工作，我将 myModal 的 ID 添加到您的模态 div 中:

<div id="myModal" class="modal hide fade">

这一切都是根据 Bootstrap 文档。也许仔细看看它？

这是您示例中的一个有效 fiddle 。我将 boostrap 的东西添加为外部资源。 http://jsfiddle.net/nJ6Mw/4/

编辑:

添加 data-dismiss="modal" 属性将使关闭按钮起作用。

<a href="#" class="btn" data-dismiss="modal">Close</a>