Bootstrap Modal立即消失

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

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

我很感激你的帮助。

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

当前回答

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

2014-11-11 10:48:24

其他回答

我遇到了@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>

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

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

2015-03-18 18:51:22

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

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

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

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

2014-09-11 11:42:39

你有没有试过去除

data-dismiss="modal"

2018-11-08 08:21:29

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

2015-06-18 07:24:54

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

2014-05-19 01:20:36

Bootstrap Modal立即消失

推荐文章

最新文章

标签