Twitter 引导模式背景不会消失答案

【问题标题】：Twitter bootstrap modal-backdrop doesn't disappearTwitter 引导模式背景不会消失
【发布时间】：2012-07-16 04:57:54
【问题描述】：

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

我能做什么？

【问题讨论】：

你在使用$('#myModal').modal('hide')吗？你能在这里放一些代码吗？
如果您使用从 getboostrap 站点本身复制并粘贴到 html 生成的选择器中，请确保删除注释“”。 Bootstrap 感到困惑，并认为评论是第二个模态元素。它为这个“第二个”元素创建了另一个背景。
@Jordan：您的评论必须是一个答案！就我而言，您的评论是正确的解决方案！
参考以下：stackoverflow.com/questions/22207377/…
我知道这个问题很老了，但是今天我有一个类似的问题，在我的情况下，有一个错误删除了“modal-lg”类，这只是为了“modal”造成混乱当您要使用键盘关闭模式时/单击外面的某个地方。

标签： twitter-bootstrap modal-dialog

【解决方案1】：

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

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

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

【讨论】：

如果可以的话，我会给这个答案+2。刚刚节省了我几个小时！
如果您需要评估 AJAX 响应并相应地更新模式，则在 AJAX 调用之前隐藏模式是一个糟糕的解决方案。
我相信这也可能是在淡入淡出动画完全完成之前调用 modal('hide') 引起的。从模式中删除淡入淡出类可能会有所帮助。
$('.modal-backdrop').remove();为我解决了，不需要删除淡入淡出类
$('.modal-backdrop').remove() 似乎会破坏未来模式的正常打开。

【解决方案2】：

确保您为应用模态行为而对$.modal() 的初始调用未传入比您预期更多的元素。如果发生这种情况，它将最终为集合中的每个元素创建一个带有背景元素的模态实例。因此，当您实际上正在查看其中一个副本时，它可能看起来像是被遗忘了背景。

在我的例子中，我尝试使用如下代码即时创建模态内容：

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

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

【讨论】：

这家伙很赚钱。我从使用 $.html() 获得的模态中删除了 cmets，它现在可以工作了。怪怪的。
这也是我的问题。
愚蠢的引导程序！他们自己的示例标记（在开始和结束时使用 cmets）打破了这种范式。删除评论，它的工作原理！
这里也一样。删除 cmets 解决了这个问题。就一个问题。我看到模态完美地工作而无需使用 $('body').append(myModal) 将其添加到 DOM。是否需要将模态添加到页面 DOM 中？
我的标签不匹配。结果相同。谢谢！

【解决方案3】：

我只是在这个问题上花了太长时间:)

虽然提供的其他答案很有帮助且有效，但从 Bootstrap 有效地重新创建模态隐藏功能对我来说似乎有点混乱，所以我找到了一个更简洁的解决方案。

问题是调用时会发生一连串的事件

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

当您随后替换一堆 HTML 作为 AJAX 请求的结果时，模式隐藏事件不会完成。但是，当一切完成时，Bootstrap 会触发一个事件，您可以像这样挂钩：

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

希望对您有所帮助！

【讨论】：

我也花了太长时间！这个答案给了我线索 - 有些东西正在破坏我的 DOM（角度）。查看引导代码，您可以通过首先删除淡入淡出类来强制立即删除背景：$('#myModal').removeClass('fade');$(myModal').modal('hide')'
应该是公认的答案 - 它按预期使用引导 API，并且不会使用 .modal-open 破解正文
这是最勤勉尽责的回答。
很好的答案，我的问题也是由于 ajax 调用替换了 dom - 我猜 modal('hide') 返回自身或模态引用，因此我们可以附加到 'hidden.bs.modal' ?
声明 模态隐藏事件未完成 让我知道了如何开始我的工作

【解决方案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>

如果您输入此数据属性，.modal-backdrop 将不会出现。有关此链接的文档：http://getbootstrap.com/javascript/#modals-usage

【讨论】：

这是一个真实的答案。在任何情况下都不要尝试手动执行 Bootstrap 打算做的事情。如果那将是您的解决方案，那么您的实施是错误的。我认为引导站点上的样板 HTML 有点不完整，这就是为什么许多人正在经历所描述的行为（包括我）。谢谢！ +1
如果你不想从按钮触发模态怎么办？
@ben 你错了。 data-backdrop="false" 只是一个告诉引导程序根本不要使用背景的选项。这与实际问题无关，它只是避免它。这就像说“我不会游泳，所以我不再进入游泳池”。这很酷，但你仍然不会游泳，如果你是老板把你扔到深水区，你会淹死的。在很多情况下都需要手动干预，例如 Angular 在应用后台踩踏 DOM 时。
这个 data-dismiss=modal 对我有帮助！接受的答案不允许您再次显示另一个模式，之后似乎被打破了
谢谢，我真的不想只为一个模态写js。在我看来，这应该是最重要的。

【解决方案5】：

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

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

就是这样，这应该可以解决问题

【讨论】：

这对我来说非常有效。在此处使用引导程序 4。
这应该是默认答案。谢谢
myModal 应该是什么？为什么它会关闭对话框？模态对话框只能通过单击关闭按钮或单击对话框外部来关闭。这似乎不是一个解决方案。
myModal 应该是什么？ -> 它是主模态的 id。为什么它会关闭对话框？ -> 之所以有效，是因为默认情况下，当您单击模态框外部时，动作会传播到其父级，并在那里进行处理。
是的！这应该是答案。

【解决方案6】：

如果您使用从 getboostrap 站点本身复制并粘贴到 html 生成的选择器中，请确保删除注释“”。 Bootstrap 感到困惑，认为评论是第二个模态元素。它为这个“第二个”元素创建了另一个背景。

【讨论】：

我该死的……这正是我的问题。删除评论，它的工作。一个 HTML 评论到底是怎么绊倒 Bootstrap 的！？
我相信它正在寻找 html 元素来计数。由于 cmets 被视为元素，因此该计数与该注释有关。
在 Mustache 模板中有此文件时发生在我身上
注释存在于 DOM 中，以至于混淆了模态组件的 javascript 部分。我忘了具体是怎样的。这是不久前的事了。
Holy Moley - 这确实有效！这真是一个奇怪的错误。

【解决方案7】：

我遇到了类似的问题：在我的模式窗口中，我有两个按钮，“取消”和“确定”。最初，两个按钮都会通过调用$('#myModal').modal('hide') 来关闭模态窗口（使用“OK”之前执行一些代码），场景如下：

打开模态窗口
做一些操作，然后点击“确定”验证它们并关闭模态
再次打开模式并单击“取消”关闭
重新打开模式，再次点击“取消”==>背景不再可用！

好吧，我的隔壁同事拯救了我的一天：不要调用$('#myModal').modal('hide')，而是为您的按钮赋予属性data-dismiss="modal"，并为您的“提交”按钮添加一个“点击”事件。在我的问题中，按钮的 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
});

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

希望这会有所帮助！

【讨论】：

这里也一样，如果不想从按钮触发模态怎么办？

【解决方案8】：

如果您太快地隐藏然后再次显示模式窗口，也会出现此问题。这在其他地方提到过，但我将在下面提供更多详细信息。

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

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

禁用模式的淡入淡出动画（从对话框中删除“淡入淡出”类）
更新模态文本而不是隐藏和重新显示它。
修复时间，使其在完成隐藏前一个模态之前不会显示模态。使用模式的事件来做到这一点。 http://getbootstrap.com/javascript/#modals-events

这里有一些相关的引导问题跟踪器帖子。跟踪帖子的数量可能比我在下面列出的要多。

【讨论】：

【解决方案9】：

.modal('隐藏')

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

所以不是

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

做

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

所以你一定要等到“隐藏”事件完成。

【讨论】：

这绝对是一个更好的解决方案。这样您就不必弄乱模态类，这可能是解决此问题的更正确方法。

【解决方案10】：

另一个可能导致此问题的错误，

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

【讨论】：

【解决方案11】：

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

<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" 属性的“否”按钮的点击事件。这有效:)

【讨论】：

手动触发点击事件不会为我关闭 IE9/IE10 中的模式。正在努力寻找解决方案。
没关系，问题有点不同 - 我在该按钮上附加了数据启用条件，虽然 IE 确实继续执行 onclick 事件，但它没有考虑数据关闭属性。

【解决方案12】：

使用：

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

Source

【讨论】：

【解决方案13】：

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

这对我有用。它不会关闭，因为当您打开弹出窗口时，它会触发 2 或 3 个模态背景。所以当你做 $('#myModal')).modal('hide');它只影响一个模态背景，其余部分仍然存在。

【讨论】：

【解决方案14】：

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

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

感谢@BillHuertas 提供的起点。

【讨论】：

【解决方案15】：

在我的模式中的任何按钮上添加data-dismiss="modal" 对我有用。我希望我的按钮调用一个带角度的函数来触发一个 ajax 调用并关闭模式，所以我在函数中添加了一个 .toggle() 并且它运行良好。（在我的例子中，我使用了 bootstrap modal 并使用了一些 angular，而不是实际的模态控制器）。

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

【讨论】：

【解决方案16】：

应用最受好评的解决方案后，我遇到了一个问题，即它会破坏未来的模态正确打开。我发现我的解决方案效果很好

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

【讨论】：

【解决方案17】：

更新面板问题。

我的问题是由于更新面板的位置。我在更新面板中有整个模式。如果您在更新面板之外声明模态并在更新面板中说模态体，那么 $('#myModalID').modal('hide'); 工作。

【讨论】：

这是我的问题。我有一个 AjaxManager 在包含整个模式的用户控件周围创建更新面板。我只在用户控件中留下了模态的主体，并在主页中移动了所有内容，一切都按预期开始工作，所以不要对你的
部分进行 ajaxify！

【解决方案18】：

这个问题的另一种观点。（我使用的是 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');

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

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

如果你遇到和我一样的问题，希望对你有所帮助。

【讨论】：

【解决方案19】：

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

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

那个关闭模态的功能很不直观。

【讨论】：

工作就像一个魅力。

【解决方案20】：

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

$('#moreLotDPModal').hide();

$("#moreLotDPModal").data('bs.modal').isShown = false;

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

$('#moreLotDPModal').removeClass("in");

$('#moreLotDPModal').attr('aria-hidden', "true");

【讨论】：

我发现这个答案很有用。

【解决方案21】：

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

两者都使用“关闭”类。更改一个或另一个类可以解决此问题。

【讨论】：

【解决方案22】：

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

【讨论】：

分享一个可能的答案（示例）。这将有助于其他人很好地理解

【解决方案23】：

确保您没有在其他地方使用相同的元素 ID/类，用于与模态组件无关的元素。

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

【讨论】：

【解决方案24】：

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

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

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

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

来自SO answer

【讨论】：

【解决方案25】：

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

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

【讨论】：

【解决方案26】：

我也遇到了同样的问题。

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

无论哪种方式，我都意识到问题是由具有与其父级相同类的元素引起的。当这些元素之一用于绑定点击功能以显示模态时，就会出现问题。

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

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

改变它，使被点击的元素与它的父元素、任何它的子元素或任何其他祖先都不具有相同的类。通常在绑定点击函数时这样做可能是一个好习惯。

【讨论】：

【解决方案27】：

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

【讨论】：

【解决方案28】：

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

小提琴 --> https://jsfiddle.net/o6th7t1x/4/

【讨论】：

【解决方案29】：

data-backdrop属性的初始值可以是

“静态”、“真”、“假”。

static 和 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++;
});


});

【讨论】：

【解决方案30】：

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

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

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

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

【讨论】：