引导模态立即消失(Bootstrap Modal immediately disappearing)

我使用的是引导一个网站上的工作。

基本上，我想用在主页的模式，通过在英雄单位按钮召唤。

按钮的代码：

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

一个可能的原因

这是当了模态插件的JavaScript被加载两次典型行为。 请检查以确保该插件是没有得到双重加载。 根据您所使用的平台，模态代码可以从一些加载的来源。 一些常见的有：

• bootstrap.js（完整的自举JS套件）
• bootstrap.min.js（与上述相同，只是精缩）
• 自举-modal.js（独立插件）
• 一个依赖装载机，例如， require('bootstrap')

调试提示

一个良好的开始是检查登记click使用开发者工具在浏览器中的事件侦听器。 Chrome浏览器，例如，会列出可在其中找到注册该侦听器代码中的JS源文件。 另一种方法是尝试搜索页面上的来源在模态代码找到了一条短语，例如， var Modal 。

不幸的是，这些并不总是发现在所有情况下的东西。 检查网络请求可以在给你加载网页上的所有的图片多了几分稳健。

A（破碎）演示

下面是当你同时加载的bootstrap.js和引导，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 ）。

如果你还碰到这个问题，寻找可能被包括引导你其他库。 （ datatables.net允许你带或不带引导指定下载-别人不一样的）。

所以我删除了bootstrap.min.js从我bundle.config和所有工作得很好。

Answer 5:

同样的症状，在引导Rails应用程序通过提供的上下文bootstrap-sass宝石，并@ Merv的回答让我在正确的轨道上。

我application.js文件有以下几点：

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

此修复程序是删除这两个线之一。 事实上，创业板的自述警告您关于此错误。 我的错。

Answer 6:

e.preventDefault(); 与jQuery UI的

对我来说，这个问题在jQuery UI的按钮点击方法重写发生，在默认情况下点击导致页面重新加载。

Answer 7:

我的代码在某种程度上有bootstrap.min.js包含了两次。 我删除了其中之一，现在一切工作正常。

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:

我跑成@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>

...它解决了这一问题。

注：我没有足够的声誉只需添加评论或给予好评着呢，我觉得还可以加一点澄清。

Answer 10:

就我而言，我只有一个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.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>

Answer 11:

我碰到今天这个问题我自己，它正好是仅适用于Chrome。 我意识到是什么让这可能是一个呈现的问题。 移动特定的模式，以它自己的渲染层解决了这个问题。

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

Answer 12:

我也有同样的问题，但对我来说发生的事情，因为我有型“提交”模式表单中的按钮。 我变了

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

在我的情况下，点击一个按钮导致页面的（不想要的）的重载。

这里是我的解决办法：

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Answer 14:

在我来说，我必须使用actionlink MVC中的按钮和我都面临这个问题，我已经尝试了以上以及其他许多解决方案，但仍然面临这个问题，然后我意识到我的代码错误。

我已经使用被称为在JavaScript模式

 $('#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>

那么问题得到解决，因为在第一个没有＃只是一个错误。

看看这会帮助你。

Answer 15:

我曾与asp.NET一个项目工作了同样的问题。 我用的是引导3.1.0解决了它降级来引导2.3.2。

Answer 16:

在移动设备上测试时我面临同样的问题，这一招为我工作

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

更改按钮定位标记它应该工作，因为它正试图进行提交，模态消失immediately.and也从模式隐藏褪色删除隐藏的发生是由于其类型按钮的问题给予<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">希望这会为你工作。

Answer 17:

另一个原因/解决方案！ 我曾在我的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>

因此，这是重复了如何输入的代码，并导致模式打开然后关闭另一个置换。 在我的情况下， data-target和data-toggle的HTML按照引导文档已经触发模式工作。 JS代码因此多余的，取出时，它的工作原理。

Answer 18:

我也有这个问题，如果按钮是一个内 然后标记模态出现一次，消失很快，走的是按钮出固定isue形式。 感谢我结束了在这个线程！ +1所有。

Answer 19:

就我而言，我不得不纳入application.html.erb头部的CDN，也安装了“jQuery的轨道”的宝石，这是我猜上面感谢文档和帖子，是多余的。

我只是从application.html.erb的头部注释掉CDN（下图）和模态适当地保持打开状态。

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

Answer 20:

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

下面的代码显示的模态，并且立即dissapeared：

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

我结束了加入“＃”到HREF所以链接不会去任何地方，它解决了我的问题。

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

Answer 21:

我知道这是旧的，但这里是另一件事来检查 - 确保你只有一个数据目标=属性。 我已经复制了，结果是按照这个线程。

Answer 22:

我又增加了bootstrap通过我的项目bower ，然后我进口bootstrap.min.js文件和后modal.js文件。 （打开的模态的按钮是一种形式的内部）。 我只是删除了进口modal.js ，它为我工作。

Answer 23:

在任何情况下使用笨3自举用数据表中。

下面是我在配置/ ci_boostrap.php修复

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

Answer 24:

不得不面对同样的问题。 原因是一样的@merv 。 问题是与添加到PAGE电泳组件本身添加在日历弹出窗口中使用的模态特征的日历组件 。

因此，要打破模式弹出的原因将是以下一个或多个

• 加载一个以上的自举JS版本/文件（精缩...）
• 添加外部日历的页面，用于引导
• 添加自定义的警报或弹出库页面
• 这增加了弹出式行为的任何其他库

Answer 25:

与角工作一段时间（5），我面临着同样的问题，但对我来说我解决如下：

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

注：需要进口的jQuery的TS文件作为“声明变量$：任何”;

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

改变我做：

• 删除“数据切换=”莫代尔”，从按钮标签（感谢@miCRoSCoPiC_eaRthLinG这个答案可以帮助我在这里）在我的情况下，它的表现模态的，所以我创建（点击）=‘showresult（）’

• 里面component.ts需要声明的Jquery（$），并单击按钮方法showresult内（）调用​​ “$（ '＃myModal'）模态（ '秀'）;”。

Answer 26:

您是否尝试过删除

data-dismiss="modal"

文章来源: Bootstrap Modal immediately disappearing