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

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

我很感激你的帮助。

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


当前回答

我也有同样的问题。我的问题是,我是显示模式按下一个链接和提示确认与jquery。

下面的代码显示了模态,并立即消失:

<a href="" onclick="do_some_stuff()">Hey</a>

我最终在href中添加了“#”,这样链接就不会去任何地方,这解决了我的问题。

<a href="#" onclick="do_some_stuff()">Hey</a>

其他回答

你有没有试过去除

data-dismiss="modal"

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

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

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

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

在我的例子中,我在application.html.erb的头部包含了CDN,还安装了'jquery-rails' gem,我猜这是多余的,感谢上面的文档和帖子。

我简单地从application.html.erb的头部注释掉了CDN(如下所示),并且模式适当地保持打开。

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->