Bootstrap Modal立即消失

时间:2012-11-30 16:19:11

标签: twitter-bootstrap modal-dialog

我正在使用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>

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

我很感激任何帮助。

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

27 个答案:

答案 0 :(得分:443)

可能的原因

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

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

调试提示

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

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

A(破碎)演示

以下是加载 bootstrap.js bootstrap-modal.js 时所发生情况的演示(仅用于确认您的体验):

Plunker

如果向下滚动到该页面上的源代码底部,则可以删除或注释掉 bootstrap-modal.js <script>行,然后验证模态将按预期运行。

答案 1 :(得分:76)

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

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

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

我通过向按钮元素添加type="button"来解决此问题,因此在点击时它不会提交表单。

答案 2 :(得分:20)

对我来说,有效的方法是删除

data-toggle="modal"
从按钮

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

答案 3 :(得分:15)

在我的mvc应用程序中找到了一段重复的引导程序引用,在此问题的其他有用答案之后。

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

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

所以我从bootstrap.min.js删除了bundle.config,一切正常。

答案 4 :(得分:12)

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

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

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

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

答案 5 :(得分:8)

e.preventDefault();使用jquery ui

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

答案 6 :(得分:8)

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

答案 7 :(得分:7)

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

答案 8 :(得分:6)

我遇到了@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,我觉得我可以添加一点澄清。

答案 9 :(得分:3)

在我的情况下,我只包含一个bootstrap.js,jquery.js文件但仍然出现这种类型的错误,而我的按钮代码是这样的:

doStuff

我简单地将 e.preventDefault(); 添加到它,它就像魅力一样。

所以,我的新代码如下:

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

答案 10 :(得分:3)

我今天自己遇到过这个问题,而且它恰好只出现在Chrome中。是什么让我意识到这可能是一个渲染问题。 将特定模态移动到它自己的渲染层解决了它。

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

答案 11 :(得分:3)

我也遇到了同样的问题,但对我而言却发生了这种情况,因为我在模态表单中有一个类型为“提交”的按钮。我改变了

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

这解决了失踪问题。

答案 12 :(得分:2)

在我的情况下,我在MVC中使用了actionlink按钮,我已经面临这个问题,我已经尝试了许多上面和其他的解决方案,但仍面临这个问题,然后我在代码中意识到我的错误。

我使用

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

然后问题只是因为第一个中没有#而得到解决。

看看这对你有帮助。

答案 13 :(得分:2)

在我的情况下,点击按钮会导致(不想要)重新加载页面。

这是我的修复:

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

答案 14 :(得分:1)

我在移动设备上测试期间遇到了同样的问题,这个技巧对我有用

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

更改按钮以锚定它应该工作的标签,问题是由于它的类型按钮,因为它试图提交所以模态立即消失。并且还从模态隐藏淡化删除隐藏  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 希望这对你有用。

答案 15 :(得分:1)

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

所以这是重复输入代码并导致模态打开然后关闭的另一个排列。就我而言,根据Bootstrap文档的html中的data-targetdata-toggle已经触发了该模式的工作。因此,该JS代码是多余的,并且在删除后可以使用。

答案 16 :(得分:1)

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

答案 17 :(得分:0)

我也有同样的问题。我的问题是我在按下链接时显示模态并提示用jquery进行确认。

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

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

我最后在href中添加了'#',所以链接不会去任何地方,它解决了我的问题。

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

答案 18 :(得分:0)

我也遇到了问题,如果按钮位于 标签内,那么模式会出现一次并很快消失,从表单中取出按钮修复了isue。谢谢,我最终在这个帖子中!全部+1。

答案 19 :(得分:0)

我知道这已经过时了,但还有另一件需要检查的事情 - 请确保您只有一个data-target =属性。我已经复制了它,结果是按照这个帖子。

答案 20 :(得分:0)

我已通过bootstrapbower添加到我的项目中,然后导入bootstrap.min.js文件并在modal.js文件之后。 (打开模态的按钮位于表单内)。我只删除modal.js的导入,它对我有用。

答案 21 :(得分:0)

如果有人使用带有数据表的codeigniter 3 bootstrap。

下面是我在config / 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'

答案 22 :(得分:0)

不得不面对同样的问题。原因与@merv相同。问题在于页面上添加了 calendar组件。该组件本身添加了要在日历弹出窗口中使用的模式功能。

所以打破模型弹出框的原因将是以下一项或多项

  • 加载多个Bootstrap js版本/文件(已最小化...)
  • 在使用引导程序的页面上添加外部日历
  • 将自定义警报或弹出库添加到页面
  • 其他任何会添加弹出窗口行为的库

答案 23 :(得分:0)

在使用Angular(5)时,我遇到了同样的问题,但对于我来说,我的解决方法如下:

component.html

<!DOCTYPE html>
<html>
<body>
<div class="container">
max-width: 1200px
</div>
</body>
</html>

component.ts

注意:需要在ts文件中将jquery导入为“ declare var $:any;”

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

我所做的更改:

  • 从Button标记中删除了“ data-toggle =“ modal”(感谢@miCRoSCoPiC_eaRthLinG,此答案对我有帮助)在我的情况下,它显示了模式,因此我创建了(click)=“ showresult()”

  • 内部component.ts需要声明Jquery($)并在按钮内部单击方法showresult()调用“ $('#myModal')。modal('show');”

答案 24 :(得分:0)

您是否尝试过删除

/var/tmp/php/opcache

答案 25 :(得分:0)

就我而言,我将CDN包含在application.html.erb的头部,并且还安装了&#39; jquery-rails&#39;宝石,我猜这要归功于上面的文档和帖子,这是多余的。

我只是从application.html.erb的头部注释掉了CDN(下面),并且模态适当地保持打开状态。

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

答案 26 :(得分:0)

我遇到了同样的问题,因为我两次切换了模态,如下所示:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

我删除了以下情况之一:

$('#myErrorModal')。modal('toggle')

它像魔术一样起作用!