Bootstrap Modal 立即消失

Posted 2023-02-22

【中文标题】Bootstrap Modal 立即消失

【英文标题】：Bootstrap Modal immediately disappearing

【发布时间】：2012-11-18 21:30:01

【问题描述】：

我正在使用引导程序开发网站。

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

按钮代码：

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

问题是，当我点击按钮时，模式会淡入，然后立即消失。

如果有任何帮助，我将不胜感激。

另外，如何更改下拉三角形的颜色（向上，不悬停）？我正在开发一个基于橙色和棕色的网站，蓝色的东西真的很烦人。

【问题讨论】：

你可以去twitter.github.com/bootstrap并按照它的例子。

我在按钮标签中使用 onClick="$('#myModal').modal()" 使它工作。

使用了你的方法：onClick="$('#myModal').modal()"

【参考方案1】：

一个可能的原因

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

bootstrap.js

（完整的 BootStrap JS 套件）

bootstrap.min.js

（同上，只是缩小了）

bootstrap-modal.js

（独立插件） 一个依赖加载器，例如，require('bootstrap')

调试提示

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

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

一个（损坏的）演示

以下是加载 bootstrap.js 和 bootstrap-modal.js 时发生的演示（只是为了确认您的体验）：

Plunker

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

【讨论】：

这对我有用，我删除了 bootstrap.js 并将 bootstrap.min.js 留在了。+1

发生在我身上的是我在 和

@PrinceTyke 你是对的，bootstrap-modal.js 的 url 已经过时，所以只有一个正在加载（使其工作）。我把它修好了，又要坏了。

对我来说这是个问题，但是，因为我将它与 ASP.NET 的捆绑一起使用，它允许您为部署的服务器指定 CDN 地址，这意味着我的部署服务器正在获取这个问题，但我的开发人员很好。因此，请确保您已从他们在其网站上提供的 CDN 中删除引导程序以避免这种情况。

这也解决了我的问题。对我来说，我的主题 bootstrap.min.js 是从 functions.php 中提取的。但是，我后来安装了 Bootstrap 短代码插件，它添加了它自己的 bootstrap.js。所以我只是从functions.php中注释掉了我的主题版本，现在它可以完美运行了。感谢您的帮助.. 甚至 8 年后！

【参考方案2】：

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

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

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

我通过将type="button" 添加到按钮元素来解决此问题，以便在单击时不会提交表单。

【讨论】：

我有两个库 bootstrap.js 和 bootstrap-editable.js，我认为它们是同一个库，所以我删除了第一个库，现在一切正常。

我在 javascript 中打开我的模式，所以我从我的 html 中删除了 data-toggle="modal" data-target="#myModal" ，这解决了我的问题。

这刚刚结束了几个小时的挣扎......谢谢

非常感谢。在浪费了几天之后，这就是问题所在。

【参考方案3】：

对我来说有效的是删除

data-toggle="modal"

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

【讨论】：

这对我有用。不完全确定为什么，因为我网站上的其他模态似乎可以正常工作，但一个特定的却没有！诡异的。无论如何，谢谢！

【参考方案4】：

在这个问题的其他有用答案之后，我在我的 mvc 应用程序中寻找了一个重复的引导程序参考。

终于找到了——它包含在我正在使用的另一个库中，所以一点也不明显！ (datatables.net)。

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

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

【讨论】：

太棒了，这个解决了我的模态问题。我同意这根本不明显。谢谢

【参考方案5】：

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

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

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

解决方法是删除两行之一。事实上，gem 的自述文件会警告您此错误。我的错。

【参考方案6】：

我的代码不知何故包含了两次 bootstrap.min.js。我删除了其中一个，现在一切正常。

【讨论】：

在我的例子中，我添加了 bootstrap.js 和 bootstrap.min.js

这个答案对我有帮助，有人已经包含了来自 cdn 的 bootstrap js，即使它已经用 npm 安装了

【参考方案7】：

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

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

这就解决了消失的问题。

【参考方案8】：

e.preventDefault(); 带有 jquery ui

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

【参考方案9】：

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

【讨论】：

@karadayi 这不是“修复”，只是可能发生此类问题的情况。

【参考方案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>

...它解决了问题。

注意：我还没有足够的声誉来简单地添加评论或投票，我觉得我可以添加一点澄清。

【参考方案11】：

在我的例子中，单击按钮会导致（不想要的）页面重新加载。

这是我的解决方法：

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

【讨论】：

如果你加载多个JS库，这是最好的路径。

【参考方案12】：

在我的例子中，我只有一个 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>

【讨论】：

是的，那只是咬我。谢谢。

【参考方案13】：

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

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

【参考方案14】：

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

我在 javascript 中使用 modal 调用了

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

然后问题得到解决只是一个错误，因为第一个没有#。

看看这对你有没有帮助。

【参考方案15】：

又一个原因/解决方案！我的 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-target 和 data-toggle 已经触发模式工作。因此，JS 代码是多余的，删除后，它可以工作。

【参考方案16】：

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

【参考方案17】：

我也遇到了问题，如果按钮位于 标记内，则模式会出现一次并很快消失，将按钮从表单中取出修复了问题。谢谢我最终进入了这个线程！向所有人 +1。

【参考方案18】：

我在移动设备上进行测试时遇到了同样的问题，这个技巧对我有用

<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"> 希望这对你有用。

【讨论】：

根据上述@RoryHunter 的建议，只需将按钮的type="submit" 更改为type="button" 即可解决此问题。

【参考方案19】：

就我而言，我将 CDN 包含在 application.html.erb 的头部中，并且还安装了“jquery-rails”gem，由于上面的文档和帖子，我猜这是多余的。

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

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

【参考方案20】：

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

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

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

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

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

【参考方案21】：

你试过删除

data-dismiss="modal"

【参考方案22】：

我知道这很旧，但还有一点需要检查 - 确保您只有一个 data-target= 属性。我已经复制了它，结果是按照这个线程。

【参考方案23】：

我已经通过bower 将bootstrap 添加到我的项目中，然后我导入了bootstrap.min.js 文件和modal.js 文件之后。 （打开模式的按钮位于表单内）。我只是删除了modal.js 的导入，它对我有用。

【参考方案24】：

如果有人使用带有数据表的 codeigniter 3 引导程序。

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

【参考方案25】：

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

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

加载多个引导 js 版本/文件（缩小...） 向使用引导程序的页面添加外部日历 向页面添加自定义警报或弹出库 任何其他添加弹出行为的库

【参考方案26】：

在使用 Angular(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>

组件.ts

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

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

我所做的更改：

从 Button 标记中删除了“data-toggle="modal"（感谢@miCRoSCoPiC_eaRthLinG，这个答案在这里对我有帮助）在我的情况下它的显示模式，所以我创建了 (click)="showresult()"

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

【参考方案27】：

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

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

它就像魔术一样工作！