Twitter bootstrap模态背景不会消失

Question

我使用的是Twitter bootstrap Modal对话框。当我单击bootstrap模式对话框的提交按钮时，它会发送一个AJAX请求。我的问题是模态背景不会消失。 “模态”对话框确实消失了，但是“模态背景”会在屏幕上创建不透明度

我该怎么办？

Answer 1

确保在执行AJAX请求时没有替换包含实际模态窗口的容器，因为当您尝试关闭它时，Bootstrap将无法找到对它的引用。在Ajax完整处理程序中删除模态，然后替换数据。

如果这不起作用，您可以通过执行以下操作来强制它消失：

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Answer 2

确保您对$.modal()的初始调用应用模式行为不会传递超出预期的元素。如果发生这种情况，它将最终为集合中的EACH元素创建一个带有背景元素的模态实例。因此，当实际上你正在查看其中一个副本时，看起来背景可能已经落后了。

就我而言，我试图用这样的代码动态创建模态内容：

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

此处，关闭</div>标记后的HTML注释意味着myModal实际上是两个元素的jQuery集合 - div和注释。他们两个都尽职尽责地变成了模态，每个都有自己的背景元素。当然，除了背景之外，评论中的模态是不可见的，所以当我关闭真实模态（div）时，它看起来就像背景被遗忘了。

Answer 3

我在这个问题上花了太长时间：）

虽然提供的其他答案都是有用且有效的，但是我从Bootstrap中有效地重新创建模态隐藏功能似乎有点麻烦，所以我找到了一个更清晰的解决方案。

问题在于，当您致电

时会发生一系列事件

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

当您因为AJAX请求而替换一堆HTML时，模态隐藏事件无法完成。但是，当所有内容都完成时，Bootstrap会触发一个事件，您可以像这样挂钩：

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

希望这有用！

Answer 4

在您的操作按钮中插入：

data-backdrop="false"

和

data-dismiss="modal" 

示例：

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

如果您输入此数据-at，则不会显示.modal-backdrop。 有关此文档的文档：http://getbootstrap.com/javascript/#modals-usage

Answer 5

如果您使用getboostrap网站本身的副本并粘贴到html生成的选择器中，请务必删除评论'＆lt;！ - /.modal - ＆gt;'。 Bootstrap感到困惑，并认为评论是第二个模态元素。它为这个“第二”元素创建了另一个后退。

Answer 6

我遇到了类似的问题：在我的模态窗口中，我有两个按钮，＆＃34;取消＆＃34;和＆＃34;好的＆＃34;。最初，两个按钮都会通过调用$('#myModal').modal('hide')（使用＆＃34; OK＆＃34;之前执行某些代码）关闭模态窗口，方案如下：

1. 打开模态窗口
2. 做一些操作，然后点击＆＃34; OK＆＃34;确认它们并关闭模态
3. 再次打开模式并点击＆＃34;取消＆＃34;
关闭
4. 重新打开模态，再次点击＆＃34;取消＆＃34; ==＆GT;背景不再可用！

好吧，我的下一个桌子保存了我的一天：不是调用$('#myModal').modal('hide')，而是给你的按钮添加属性data-dismiss="modal"并添加一个＆＃34;点击＆＃34;活动到你的＆＃34;提交＆＃34;按钮。在我的问题中，按钮的HTML（好吧，TWIG）代码是：

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

在我的JavaScript代码中，我有：

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

虽然没有＆＃34;点击＆＃34;事件归因于＆＃34;取消＆＃34;按钮。模态现在正确关闭，让我再次使用＆＃34; normal＆＃34;页。实际上似乎data-dismiss="modal"应该是指示按钮（或任何DOM元素）应该关闭Bootstrap模式的唯一方法。 .modal('hide')方法似乎表现得不太可控。

希望这有帮助！

Answer 7

我知道这是一个非常古老的帖子，但这可能有所帮助。 这是我的一个非常小的解决方法

$('#myModal').trigger('click');

多数民众赞成，这应该解决问题

Answer 8

如果隐藏然后再次快速显示模态窗口，也会发生此问题。这在其他地方提到了问题，但我将在下面提供更多细节。

问题与时间和淡入淡出过渡有关。如果在前一个模态的淡出过渡完成之前显示模态，您将看到这个持久的背景问题（模态背景将保留在屏幕上，以您的方式）。 Bootstrap显然不支持多个同步模态，但即使您隐藏的模态和您显示的模态相同，这似乎也是一个问题。

如果这是您的问题的正确原因，这里有一些缓解问题的选项。选项＃1是一个快速简便的测试，用于确定淡入淡出过渡时间是否确实是导致问题的原因。

1. 禁用模态的淡化动画（从对话框中删除“淡入淡出”类）
2. 更新模态的文本，而不是隐藏和重新显示它。
3. 修正时间，使其在隐藏上一个模态之前不会显示模态。使用模态的事件来执行此操作。 http://getbootstrap.com/javascript/#modals-events

以下是一些相关的bootstrap问题跟踪器帖子。可能会有比我下面列出的更多跟踪器帖子。

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

Answer 9

.modal（ '隐藏'）

手动隐藏模态。 在模态实际隐藏之前返回调用者（即在hidden.bs.modal事件发生之前）。

所以而不是

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

DO

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

所以你一定要等到“隐藏”事件结束。

Answer 10

即使我遇到了类似的问题，我也有以下两个按钮

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

我想执行一些ajax操作，并且在ajax操作成功后关闭模态。所以这就是我所做的。

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

我触发了具有data-dismiss="modal"属性的“否”按钮的点击事件。这有效：）

Answer 11

另一个可能产生此问题的错误，

请确保您的页面中没有多次包含bootstrap.js脚本！

Answer 12

使用：

$('.modal.in').modal('hide') 

Source

Answer 13

此解决方案适用于Ruby on Rails 3.x和重建部分DOM（包括模式）的js.erb文件。无论ajax调用是来自模态还是来自页面的不同部分，它都可以工作。

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

感谢@BillHuertas的起点。

Answer 14

updatepanel问题。

我的问题是由于更新面板的位置。我在updatepanel中有完整的模态。如果你在updatepanel之外声明模态并且只是说，在更新面板中的模态体，那么     $（ '＃myModalID'）模态（ '隐藏'）。 工作

Answer 15

对这个问题的另一种观点。 （我正在使用bootstrap.js版本3.3.6）

我错误地在javascript中手动初始化模态：

$('#myModal').modal({
   keyboard: false
})

并使用

data-toggle="modal"

在此按钮中，如下例所示（显示在文档中）

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

所以结果它创建了两个

实例

<div class="modal-backdrop fade in"></div>

打开模态时，

附加到我的html正文。这可能是使用函数关闭模态时的原因：

$('#myModal').modal('hide');

它只删除一个背景实例（如上图所示），因此背景不会消失。但是如果你在bootstrap doc中使用data-dismiss="modal"添加html，它确实会消失。

因此我的问题的解决方案是仅在javascript中手动初始化模态而不使用数据属性，这样我就可以手动关闭模态并使用data-dismiss="modal"功能。

希望如果您遇到与我相同的问题，这将有所帮助。

Answer 16

$（ '＃myModal'）触发（ '点击'）;

这对我有用。它没有关闭，因为当你打开弹出窗口时，它会触发2或3个模态背景。所以当你做$（'＃myModal'））。modal（'hide'）;它只影响一个模态背景和休息。

Answer 17

尝试提交表单时，我遇到了同样的问题。解决方案是将按钮类型从submit更改为button，然后按如下方式处理按钮单击事件：

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Answer 18

在我的模态中的任何按钮上添加{ "name": "test", "version": "1.0.0", "description": "test", "main": "main.js", "scripts": { "start": "electron .", "rebuild": "electron-rebuild -f -w sqlite3" }, "repository": "https://github.com", "keywords": [ "test" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "~1.6.2", "electron-rebuild": "^1.5.11" }, "dependencies": { "bootstrap": "^4.0.0-alpha.6", "electron-fetch": "^1.0.0-aplha4", "electron-handlebars": "^1.0.0", "electron-prebuilt": "^1.4.13", "electron-rebuild": "^1.5.11", "electron-sqlite3": "^0.0.3", "font-awesome": "^4.7.0", "jquery": "^3.2.0", "sqlite3": "^3.1.8" } } 为我工作。我希望我的按钮调用带角度的函数来激活ajax调用并关闭模态，所以我在函数中添加了const sqlite3 = require('sqlite3').verbose(); let db = new sqlite3.Database(':memory:'); 并且它运行良好。 （在我的例子中，我使用data-dismiss="modal"并使用了一些.toggle()，而不是实际的模态控制器。）

bootstrap modal

Answer 19

仅供参考，如果有人遇到这种情况......我花了大约3个小时才发现最好的方法如下：

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

关闭模态的功能非常不直观。

Answer 20

使用切换而不是隐藏，解决了我的问题

Answer 21

确保您没有在其他地方使用相同的元素Id / class，因为与模态组件无关的元素。

那就是..如果您要识别使用类名“myModal”触发模态弹出窗口的按钮，请确保没有不相关的元素具有相同的类名。

Answer 22

我有类似的问题。我正在将Boostrap与Backbone结合使用，我正在捕获“Do it”按钮的点击，然后停止传播这些事件。奇怪的是，这使得模态消失了，但不是背景。如果我调用event.preventDefault（）但不调用stopPropagation（），则一切正常。

Answer 23

最近我遇到了这个问题，这里提供的解决方案都没有帮助我。或它完全破坏了它，因此无法再次显示。 准备好文档也没有用，但是有效的方法是，我用立即调用的函数包装了所有侦听器，如下所示：

$(function () {
    $('#btn-show-modal').click(function () {
        $("#modal-lightbox").modal('show');
    });

    $('#btn-close-modal').click(function () {
        $("#modal-lightbox").modal('hide');
    });
});

Answer 24

对我来说，最好的答案就是这个。

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

  

模态标记展示位置   始终尝试将模式的HTML代码放在文档的顶级位置，以避免影响模式外观和/或功能的其他组件。

来自SO answer

Answer 25

在应用最高评级解决方案后，我遇到了一个问题，即它打破了未来模态正常打开。我发现我的解决方案很好用

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

Answer 26

经过多次搜索后，以下代码行解决了我的问题，我想在ajax成功时关闭模式：

$('#exampleModal').modal('hide');
$("[data-dismiss=modal]").trigger({ type: "click" });

非常感谢，曼努埃尔·费尔南多（Manuel Fernando） https://stackoverflow.com/a/27218322/5935763

Answer 27

试试这个

$('#something_clickable').on('click', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $('.modal-backdrop').remove();
 });

它适用于我。

Answer 28

来自https://github.com/twbs/bootstrap/issues/19385

  

Modal的show / hide方法是异步的。因此，代码如：

     

foo.modal("hide"); bar.modal("show");无效。你需要等待   显示/隐藏到实际完成（通过听取   显示/隐藏事件;看到   http://getbootstrap.com/javascript/#modals-events）在致电之前   再次显示或隐藏方法。

当我两次打开相同的模态时，我遇到了这个问题，所以一个简单的修复是检查它是否已经显示，然后再不显示：

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}

Answer 29

在ASP.NET中，在后面的代码上添加UpdatePanel的更新 jquery命令。例如：

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();

Answer 30

我有模态背景屏幕冻结问题，但情况稍有不同：当显示2个背对背模态时。例如第一个会要求确认执行某些操作，并且在单击“确认”按钮后，操作将遇到错误，并且将显示第二个模式以弹出错误消息。第二个模态背景会冻结屏幕。 类名中没有冲突或元素的id。

解决问题的方法是给浏览器足够的时间来处理模态背景。点击“确认”后，不要立即采取行动，让浏览器说出500ms来隐藏第一个模态并清理背景等 - 然后采取最终显示错误模式的操作。

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

_dialogConfirmed（）函数具有以下代码：

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

我猜其他解决方案有效，因为他们花了足够的额外时间为浏览器提供所需的清理时间。

Answer 31

数据背景属性的初始值可以是

“静态”，“真实”，“虚假”。

静态和 true 添加模态阴影，而 false 禁用阴影，因此您只需在第一次点击时更改此值为假。像这样：

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Answer 32

在.net MVC4项目中，我在Ajax.BeginForm（OnComplete =“addComplete”[额外代码已删除]）中弹出了模式弹出（bootstrap 3.0）。在“addComplete”javascript里面我有以下代码。这解决了我的问题。

  

$（ '＃moreLotDPModal'）隐藏（）;

     

$（“＃moreLotDPModal”）。data（'bs.modal'）。isShown = false;

     

$（ '主体'）removeClass（ '模态开'）;

     

$（ '模态-背景。'）除去（）;

     

$（ '＃moreLotDPModal'）removeClass（ “IN”）;

     

$（'＃moreLotDPModal'）。attr（'aria-hidden'，“true”）;

Answer 33

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

小提琴 - ＆gt; https://jsfiddle.net/o6th7t1x/4/

Answer 34

我正在使用Meteor，我遇到了同样的问题。我的错误的原因是：

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

正如你所看到的，我在else中添加了模态，所以当我的模态更新了联系信息时，if有另一个状态。这导致模态模板在关闭之前就被排除在DOM之外。

解决方案：将模态移出if-else：

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Answer 35

我遇到了同样的问题。我发现这是由于Bootstrap和JQueryUI之间的冲突。

两者都使用“关闭”类。在一个或另一个中更改类会修复此问题。

Answer 36

我有同样的问题。

但是我使用的是bootbox.js，所以它可能与之有关。

无论哪种方式，我都意识到这个问题是由一个元素与它的父元素具有相同类别引起的。当其中一个元素用于绑定单击函数以显示模态时，就会出现问题。

即。这就是导致问题的原因：

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

更改它，以便被点击的元素与其父级，任何子级或任何其他祖先不具有相同的类。在绑定点击函数时，通常可以这样做。