我正在用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>

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

我很感激你的帮助。

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


当前回答

我也有同样的问题,但对我来说,这是因为我在模式表单中有一个类型为“提交”的按钮。我改变了

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

to

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

这就解决了失踪问题。

其他回答

我在asp.NET项目中遇到了同样的问题。我使用bootstrap 3.1.0解决了它降级到bootstrap 2.3.2。

今天我自己也遇到了这个问题,而且碰巧只是在Chrome上。是什么让我意识到这可能是一个渲染问题。 移动特定的模式到它自己的渲染层解决了这个问题。

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

如果使用jquery两次附加事件监听器,也会出现这个问题。 例如,你可以在不解除绑定的情况下设置:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

如果发生这种情况,事件将连续触发两次,模态将消失。

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

参见示例:http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

我遇到了@gpasse在他的例子中显示的相同症状。这是我的密码……

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

正如@Bhargav所建议的,我的问题是由于按钮试图提交表单,并重新加载页面。我将按钮更改为<a>链接如下:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

...它解决了这个问题。

注意:我还没有足够的声誉来简单地添加评论或点赞,我觉得我可以补充一点澄清。

我在我的mvc应用程序中寻找了一个重复的引导参考,在这个问题上的其他有用的答案之后。

终于找到了——它包含在我正在使用的另一个库中,所以一点也不明显!(datatables.net)。

如果您仍然遇到这个问题,请寻找其他可能为您包含引导的库。(datatables.net允许您指定有或没有引导的下载-其他人也这样做)。

所以我从我的包中删除了bootstrap.min.js。配置和所有工作都很好。