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

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

我很感激你的帮助。

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


当前回答

对我来说,有效的方法是去除

data-toggle="modal"

从按钮。按钮本身可以是任何元素-链接,div,按钮等。

其他回答

在我的例子中,我在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>-->

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

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

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

看看这对你是否有帮助。

我有同样的问题,因为我切换了我的模式两次,如下所示:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

我删除了一个出现项:

(“# myErrorModal美元)。“充气”(资本)

它像魔法一样起作用!