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>

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

我很感激你的帮助。

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

当前回答

在我的情况下，我只有一个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

其他回答

e.preventDefault ();jquery UI

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

2014-04-18 13:19:29

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

2017-09-12 00:27:54

又是一个原因/解决方案!我在JS代码中有:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

但是我的HTML代码已经写成了:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

这是复制输入代码并导致模态打开然后关闭的另一种排列方式。在我的例子中，数据目标和数据切换在html按照引导文档已经触发模式工作。因此，JS代码是冗余的，当删除它时，它可以工作。

2019-02-23 04:37:24

我也有同样的问题，但对我来说，这是因为我在模式表单中有一个类型为“提交”的按钮。我改变了

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

这就解决了失踪问题。

2016-05-16 22:50:38

在我的例子中，我在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 Modal立即消失

推荐文章

最新文章

标签