我正在用bootstrap做一个网站。

基本上,我想在主页中使用一个模态,通过Hero Unit中的按钮来调用。

按钮代码:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

模态代码:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

问题是,只要我点击按钮,模态就会淡入,然后立即消失。

我很感激你的帮助。

此外,如何改变下拉三角形的颜色(指向向上,没有悬停)?我正在做一个基于橙色和棕色的网站,那个蓝色的东西真的很烦人。


当前回答

在我的情况下,我只有一个bootstrap.js, jquery.js文件,但仍然得到这种类型的错误,我的代码按钮是这样的:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

我简单地添加了e.c preventdefault ();对它很有吸引力。

所以,我的新代码如下:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

其他回答

我也有这个问题,如果按钮是在一个标签内,然后模态出现一次,很快就消失了,把按钮从形式固定的问题。谢谢我在这个帖子结束!+1到所有。

我也有同样的问题,但原因不同。我按照文档创建了一个按钮,如下所示:

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

当我点击它时,似乎什么也不会发生。但是,该按钮位于<form>中,它暂时只是获取相同的页面。

我通过在button元素中添加type="button"来解决这个问题,这样当点击时它就不会提交表单了。

e.preventDefault ();jquery UI

对我来说,这个问题发生在jquery ui按钮上的click方法覆盖,导致默认情况下单击页面重新加载。

我的代码莫名其妙地包含了bootstrap.min.js两次。我移除了其中一个,现在一切都很好。

我知道这是旧的,但这里还有另一件事要检查—确保您只有一个data-target=属性。我复制了它,结果是按照这个线程。