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

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

我很感激你的帮助。

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


当前回答

e.preventDefault ();jquery UI

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

其他回答

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

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

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

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

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

e.preventDefault ();jquery UI

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

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

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

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

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

同样的症状,在一个带有Bootstrap -sass gem提供的Bootstrap的Rails应用程序的上下文中,@merv的回答使我走上了正确的轨道。

我的application.js文件有以下内容:

//= require bootstrap
//= require bootstrap-sprockets

解决办法是去掉两条线中的一条。事实上,宝石的自述会警告你这个错误。我的坏。

在我的情况下,我在MVC中使用actionlink按钮,我面临这个问题,我尝试了上面和其他许多解决方案,但仍然面临这个问题,然后我意识到我在代码中的错误。

我在javascript中调用了modal

 $('#ModalId').modal('show');

在出现错误之前,我使用了这个按钮

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

我在这个按钮中没有href属性的值,所以我面临这个问题。

然后像这样编辑按钮代码

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

然后问题得到解决,只是一个错误,因为没有#在第一个。

看看这对你是否有帮助。