无法获得简单的bootstrap模式

Question

我试图让一个简单的bootstrap的模态样本工作,我按照这个文档说"你可以轻松激活你的页面上的模态,而无需编写一行javascript.只需给一个元素一个数据控件模态属性,对应一个模态元素id,...",但我尽我所能,并进行了大量的研究仍然无法让这个简单的模态工作.

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</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>

我有这个:

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

或这个:

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

按钮激活模态,我也在页面上加载了bootstrap-modal.js.除非我添加了一个javascript行来处理"Launch Modal"点击事件,当我点击"Launch Modal"时,根本没有任何事情发生,有什么我错过的吗？

Answer 1

小提琴1:twitter引导程序站点上使用的模态的副本.(这是默认情况下不显示的模式,但是当您单击演示按钮时会启动.)

http://jsfiddle.net/9RcDN/

小提琴2:引导文档中描述的模态的副本,但它包含了避免使用任何javascript的必要元素.请特别注意hide在#myModaldiv 上包含类,以及data-dismiss="modal"在"关闭"按钮上使用.

http://jsfiddle.net/aPDVM/4/

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


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

值得注意的是,您使用的站点在bootstrap 2.0上运行,而官方的Twitter bootstrap站点在2.0.3上运行.

Answer 2

我终于从"Sven" 找到了这个解决方案并解决了这个问题.我做的是我包括"bootstrap.min.js":

<script src="bootstrap.min.js"/>

代替:

<script src="bootstrap.min.js"></script>

它解决了看起来很奇怪的问题.有谁能解释为什么？

Answer 3

另外看一下BootBox,在bootstrap模式中显示警报和确认框非常简单.http://bootboxjs.com/

实现就像这样简单:

正常警报:

bootbox.alert("Hello world!");

确认:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
}); 

PROMT:

bootbox.prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

甚至定制:

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);

Answer 4

我也遇到了Modals的问题.我应该在bootstrap.min.js之前声明jquery.min.js(在我的布局页面中).来自官方网站:"所有插件都依赖于jQuery(这意味着必须在插件文件之前包含jQuery )"

Answer 5

我也遇到过这个问题.我包括bootstrap.js和bootstrap-modal.js.如果您已经有bootstrap.js,则不需要包含popover.