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>

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

我很感激你的帮助。

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

当前回答

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

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

2015-07-14 08:38:00

其他回答

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

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

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

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

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

2016-04-28 15:56:04

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

    <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

如果使用jquery两次附加事件监听器，也会出现这个问题。例如，你可以在不解除绑定的情况下设置:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

如果发生这种情况，事件将连续触发两次，模态将消失。

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

参见示例:http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

2014-08-26 09:33:23

我也有同样的问题，但原因不同。我按照文档创建了一个按钮，如下所示:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

当我点击它时，似乎什么也不会发生。但是，该按钮位于<form>中，它暂时只是获取相同的页面。

我通过在button元素中添加type="button"来解决这个问题，这样当点击时它就不会提交表单了。

2014-09-11 11:42:39

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

2017-09-12 00:27:54

Bootstrap Modal立即消失

推荐文章

最新文章

标签