Bootstrap Modal立即消失

Question

我在使用bootstrap的网站上工作.

基本上,我想在主页中使用一个模态,由英雄单元中的按钮召唤.

按钮代码:

<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>

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

我很感激任何帮助.

另外,如何更改下拉三角形的颜色(朝上,没有悬停)？我正在开发一个基于橙色和棕色的网站,蓝色的东西真的很烦人.

Answer 1

一个可能的原因

这是Modal插件的JavaScript加载两次时的典型行为.请检查以确保插件没有加载双重.根据您使用的平台,可以从多个源加载模态代码.一些常见的是:

• bootstrap.js(完整的BootStrap JS套件)
• bootstrap.min.js(与上面相同,只是缩小)
• bootstrap-modal.js(独立插件)
• 依赖加载器,例如, require('bootstrap')

调试技巧

一个好的起点是click使用浏览器中的开发人员工具检查已注册的事件监听器.例如,Chrome将列出JS源文件,其中可以找到注册侦听器的代码.另一种选择是尝试在页面上搜索源代码中找到的模板中的短语,例如,var Modal.

不幸的是,在所有情况下,这些并不总能找到.在为您提供页面上加载的所有内容的图片时,检查网络请求可以更加健壮.

一个(破碎的)演示

这是一个演示当你加载bootstrap.js和bootstrap-modal.js时发生的事情(只是为了确认你的体验):

Plunker

如果向下滚动到页面的源的底部,你可以删除或注释掉<script>的行引导,modal.js然后验证,现在按预期进行模态的功能.

Answer 2

我有同样的问题,但它有不同的原因.我按照文档编写了一个按钮,如下所示:

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

当我点击它时,似乎什么都不会发生.但是,按钮位于<form>暂时只是获取同一页面的按钮中.

我通过添加type="button"到按钮元素来修复此问题,以便在单击时不会提交表单.

Answer 3

对我来说,有效的是删除

data-toggle="modal"

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

Answer 4

在这个问题的其他有用答案之后,我在我的mvc应用程序中查找了一段重复的引导程序引用.

终于找到了它 - 它被包含在我正在使用的另一个库中,因此根本不显而易见!(datatables.net).

如果仍然遇到此问题,请查找可能包含bootstrap的其他库.(datatables.net允许您指定带或不带引导程序的下载 - 其他人也这样做).

所以我删除了bootstrap.min.js我的bundle.config所有工作正常.

Answer 5

同样的症状,在bootstrap-sassgem 提供的带有Bootstrap的Rails应用程序的上下文中,@ merv的回答让我走上正轨.

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

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

解决方法是删除两行中的一行.确实,宝石的自述文件警告你这个错误.我的错.

Answer 6

我的代码以某种方式将bootstrap.min.js包含两次.我删除了其中一个,现在一切正常.

Answer 7

e.preventDefault(); 用jquery ui

对我来说,jquery ui按钮上的click方法覆盖会出现此问题,默认情况下会导致页面重新加载.

Answer 8

如果使用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

Answer 9

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

    <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.'/>

这解决了失踪问题。

Answer 10

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

......它解决了这个问题.

注意:我没有足够的声誉来简单地添加评论或upvote,我觉得我可以添加一些澄清.