Twitter bootstrap模式背景不会&#39

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

如果这不起作用，你可以通过以下方法强迫它消失:

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

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

1. 打开模态窗口
2. 做一些操作，然后点击“确定”是否验证他们并关闭模式
3. 再次打开模态并通过点击“取消”来取消
4. 重新打开模式，再次点击“取消”==>背景不再可访问!

好吧，我旁边的同事拯救了我:与其调用$('#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')方法的行为似乎不太可控。

希望这能有所帮助!

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

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

确保你最初调用$.modal()来应用模态行为没有传入比你想要的更多的元素。如果发生这种情况，它将为集合中的每个元素创建一个带有背景元素的模态实例。因此，它可能看起来像是背景被留下了，而实际上你正在看的是其中一个复制品。

在我的例子中，我试图用这样的代码创建模式内容:

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

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

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

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

问题是，当你打电话时，会发生一连串的事件

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

然后，当您替换AJAX请求的结果一堆HTML时，模式隐藏事件不会结束。然而，Bootstrap在所有内容都为完成了时触发一个事件，你可以像这样钩入:

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

希望这对你有帮助!

使用:

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

Source .

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

$ (' # moreLotDPModal ') hide ();

$(“# moreLotDPModal") . data(“bs.modal”)。isshow = false;

$('体').removeClass(“modal-open”);

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

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

$ (" # moreLotDPModal”)。attr(“aria-hidden”、“true");

updatepanel问题。

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

两者都使用“close”类。改变其中一个类可以解决这个问题。

这个解决方案适用于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的出发点。

我也有同样的问题。

然而，我使用bootbox.js，所以这可能是与此有关。

不管怎样，我意识到这个问题是由一个元素与它的父类具有相同的类引起的。当其中一个元素被用来绑定一个点击函数来显示模态时，就会出现问题。

这就是问题的原因:

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

更改它，以便被点击的元素不具有与其父类、任何子类或任何其他父类相同的类。通常在绑定单击函数时这样做可能是一个很好的实践。

在动作按钮中插入:

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>

如果你输入这个data-attr， .modal- background将不会出现。 http://getbootstrap.com/javascript/#modals-usage

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

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

确保你没有在你的页面中包含bootstrap.js脚本不止一次!

我正在和流星一起工作，我也遇到了同样的问题。我的bug的原因是:

\{\{#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}}

我错误地在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的主体。这可能是使用function关闭模态时的原因:

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

它只删除一个背景实例(如上所示)，所以背景不会消失。但如果你在html上使用data-dismiss="modal" add，它就会消失，就像bootstrap doc中显示的那样。

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

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

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

这个问题也会发生，如果你隐藏，然后再次显示模式窗口太快。这一点在其他地方提到过，但我将在下面提供更多细节。

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

如果这是你的问题的正确原因，这里有一些缓解问题的选择。选项#1是一个快速而简单的测试，可以确定渐隐过渡时间是否确实是问题的原因。

1. 禁用模态的Fade动画(从对话框中删除Fade类)
2. 更新模态的文本，而不是隐藏并重新显示它。
3. 修正时间，使它不会显示模态，直到它完成隐藏前一个模态。使用模态的事件来做到这一点。http://getbootstrap.com/javascript/#modals-events

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

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

.modal(隐藏的)

手动隐藏模式。在模态实际被隐藏之前返回给调用者(即在hidden.bs.modal事件发生之前)。

所以与其

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

做

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

因此，您一定要等到“hide”事件完成。

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

"static"，"true"， "false"。

静态和真正的添加模态阴影，而假禁用阴影，所以你只需要在第一次点击时将这个值更改为false。是这样的:

$(document).on('ready',function(){
	

var count=0;
	

$('#id-which-triggers-modal').on('click',function(){
		

if(count>0){
		

$(this).attr('data-backdrop','false')
}
count++;
});




});

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

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

关闭模态的函数非常不直观。

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

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

这是. .如果你使用类名myModal来标识触发模式弹出窗口的按钮，请确保没有具有相同类名的不相关元素。

解决这个问题的方法是给浏览器足够的时间来处理模式背景。而不是在点击“确认”后立即采取行动，给浏览器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);

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

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

从https://github.com/twbs/bootstrap/issues/19385

Modal的显示/隐藏方法是异步的。因此，代码如下:

foo.modal("hide"); bar.modal("show");无效。你需要等待 实际完成的显示/隐藏(通过侦听 显示/隐藏事件;看到 http://getbootstrap.com/javascript/#modals-events) 重新显示或隐藏方法

我有这个问题时，我打开相同的模式两次太快，所以一个简单的解决方法是检查它是否已经显示，然后不显示它再次:

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

试试这个

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

这对我来说很有效。

我也遇到过类似的问题。我将Boostrap与Backbone结合使用，我捕捉到点击“Do it”按钮，然后停止这些事件的传播。奇怪的是，这让模态消失了，但背景却没有。如果我调用event.preventDefault()，但不调用stopPropagation()，这一切都很好。

在模式中的任何按钮上添加data-dismiss="modal"对我有用。我想让我的按钮用angular调用一个函数来触发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 })
}

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

就是这样，这应该能解决问题

$ (' # myModal ') .trigger(“点击”);

这对我很管用。它没有关闭，因为当你打开弹出窗口时，它会触发2或3个模式背景。当你执行$('#myModal')).modal('hide');它只影响一个情态-背景和其余的。

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

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


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

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

从这个所以回答

在应用了最高评级的解决方案后，我有一个问题，它打破了将来情态动词正确打开。我已经找到了我的解决方法

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

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

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

这行代码在许多搜索后解决了我的问题，我想关闭ajax成功的模式:

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

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


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

有些情况下，其他答案(有帮助的和有效的)不能很容易地应用。那么，一个可能的解决方案是实现一个事件，在模态对话框消失后不久触发对模态背景的单击。

下面是一个基于以下模态对话框的例子:

<div class="modal fade ..." id="IdOfMyModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>

删除“情态背景”;(在屏幕上创建背景不透明)点击模式，添加以下代码:

$('#IdOfMyModal').on("click", function() {
setTimeout(function() {
if ($('#IdOfMyModal').css("opacity") != "1")
$('.modal-backdrop').trigger('click');
}, 100);
});

            var elem = document.querySelectorAll('[data-dismiss="modal"]')[0];
var evt = new Event('click');
elem.dispatchEvent(evt);


var modalelem = document.getElementById('exampleModalCenter');


var myModal = new bootstrap.Modal(modalelem, { keyboard: false })


const fade = modalelem.classList.contains('fade');
if (fade) {
modalelem.classList.remove('fade');
}


myModal.hide();
myModal.dispose();


var backdrop = document.getElementsByClassName('modal-backdrop')[0];
backdrop.style.display = 'none';


var modalopen = document.getElementsByClassName('modal-open')[0];
modalopen.classList.remove('modal-open');
modalopen.style.removeProperty("overflow");\