2

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

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…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
4

1 回答 1

2

你错过了启动模态的东西。您可以添加一个链接以使用data-target属性中引用的模态 ID 打开它，或者将href目标设置为模态 div：

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

您可以使用 javascript 将 Modal 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 文档。也许仔细看看它？

这是您示例中的一个工作小提琴。我将 boostrap 的东西添加为外部资源。http://jsfiddle.net/nJ6Mw/4/

编辑：

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

<a href="#" class="btn" data-dismiss="modal">Close</a>
于 2013-02-27T00:17:17.240 回答