Bootstrap Modal立即消失

我正在使用引导程序在网站上工作。

基本上，我想在主页中使用模态，由英雄单位中的按钮召唤。

按钮代码：

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

问题是，一旦我单击按钮，模态就会淡入，然后立即消失。

我将不胜感激。

另外，如何更改下拉三角形的颜色（指向上方，没有悬停）？我正在基于橙色和棕色的网站上工作，那种蓝色的东西真的很烦人。

一个可能的原因

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

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

调试技巧

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

不幸的是，这些方法并不能总是在所有情况下都能找到。检查网络请求可以使您更清楚地了解页面上加载的所有内容。

一个（破碎的）演示

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

柱塞

如果向下滚动到页面的源的底部，你可以删除或注释掉<script>的行引导，modal.js，然后验证，现在的模式将作为预期。

我有同样的问题，但原因不同。我按照文档进行操作，并创建了一个如下所示的按钮：

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

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

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

对我来说，有效的是删除

data-toggle="modal"

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

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

终于找到它了-它包含在我正在使用的另一个库中，所以一点都不明显！（datatables.net）。

如果仍然遇到此问题，请寻找其他可能包含引导程序的库。（datatables.net允许您指定带有或不带有引导程序的下载-其他操作相同）。

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

同样的症状，在bootstrap-sassgem 提供的具有Bootstrap的Rails应用程序的上下文中，@ merv的回答使我处于正确的轨道。

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

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

解决方法是删除两行之一。实际上，宝石的自述文件会警告您有关此错误的信息。我的错。

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

e.preventDefault(); 与jQuery UI

对我来说，在jQuery ui按钮上使用click方法覆盖会发生此问题，默认情况下会导致单击时重新加载页面。

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

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

...并解决了问题。

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

我也遇到了同样的问题，但是对我来说，这是发生的，因为我在模式窗体中有一个类型为“ submit”的按钮。我变了

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

这就解决了失踪问题。

就我而言，我只有一个bootstrap.js，jquery.js文件，但是仍然出现这种类型的错误，而我的button代码是这样的：

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

我今天亲自遇到了这个问题，而且碰巧只是在Chrome中。是什么让我意识到这可能是渲染问题。将特定模态移动到其自己的渲染层即可解决该问题。

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

就我而言，单击按钮会导致（不需要的）页面重新加载。

这是我的解决方法：

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

以我actionlink为例，我在MVC中使用了按钮，并且遇到了这个问题，上面和其他地方都尝试了许多解决方案，但仍然遇到该问题，然后我意识到了代码中的错误。

我已经通过使用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>

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

看看这是否对您有帮助。

另一个原因/解决方案！我在我的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代码是多余的，并且在删除后可以正常工作。

我在使用asp.NET进行项目时遇到相同的问题。我使用的是Bootstrap 3.1.0，将其降级为Bootstrap 2.3.2。

我也有问题，如果按钮在 标签，然后模式就会出现一次，然后很快消失，将按钮从表单中移出即可修复问题。谢谢，我结束了这个话题！+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"> 希望这对您有用。

就我而言，我将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>-->

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

下面的代码显示了模式，并且立即消失了：

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

我最终在href中添加了“＃”，因此该链接不会出现在任何地方，从而解决了我的问题。

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

您是否尝试过删除

data-dismiss="modal"

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

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

如果有人使用带数据表的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'

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

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

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

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

component.ts

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

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

我所做的更改：

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

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

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

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

它像魔术一样起作用！