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>

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

我很感激你的帮助。

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

当前回答

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

2015-05-11 22:03:07

其他回答

在我的情况下，我只有一个bootstrap.js, jquery.js文件，但仍然得到这种类型的错误，我的代码按钮是这样的:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

我简单地添加了e.c preventdefault ();对它很有吸引力。

所以，我的新代码如下:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

2015-06-17 08:20:03

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

2015-05-11 22:03:07

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

2014-05-19 01:20:36

我已经通过bower添加了bootstrap到我的项目中，然后我导入了bootstrap.min.js文件，然后导入了modal.js文件。(打开模式的按钮在表单内部)。我只是删除了modal.js的导入，它为我工作。

2018-01-28 17:20:54

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

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

2015-07-14 08:38:00

Bootstrap Modal立即消失

推荐文章

最新文章

标签