我正在使用Twitter引导模态对话框 . 当我单击bootstrap模式对话框的提交按钮时，它会发送一个AJAX请求 . 我的问题是模态背景不会消失 . “模态”对话框确实消失了，但是“模态背景”会在屏幕上创建不透明度
我能做什么？
我有同样的问题 . 我发现这是由于Bootstrap和JQueryUI之间的冲突 .
两者都使用“关闭”类 . 在一个或另一个中更改类修复此问题 .
$（ '＃myModal'）触发器（ '点击'）;
这对我有用 . 它没有关闭，因为当你打开弹出窗口时它会触发2或3个模态背景 . 所以当你做$（'＃myModal'）） . modal（'hide'）;它只影响一个模态背景和休息 .
在执行AJAX请求时，请确保不要替换包含实际模态窗口的容器，因为当您尝试关闭它时，Bootstrap将无法找到对它的引用 . 在Ajax完整处理程序中删除模态然后替换数据 .
如果这不起作用，您可以通过执行以下操作来强制它消失：
$('#your-modal-id').modal('hide'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove();
确保初始调用 $.modal() 以应用模态行为不会传递超出预期的元素 . 如果发生这种情况，最终将为集合中的EACH元素创建一个带有背景元素的模态实例 . 因此，看起来背景可能已被遗忘，实际上你正在查看其中一个副本 .
$.modal()
就我而言，我试图用这样的代码动态创建模态内容：
myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->'); $('body').append(myModal); myModal.modal();
在这里，关闭 </div> 标签后的HTML注释意味着myModal实际上是两个元素的jQuery集合 - div和注释 . 他们两个都尽职尽责地变成了模态，每个都有自己的背景元素 . 当然，除了背景之外，评论所形成的模态是不可见的，所以当我关闭真实模态（div）时，它看起来就像是背景被遗忘了 .
</div>
我只是花了太长时间才解决这个问题:)
虽然提供的其他答案都是有用且有效的，但是我从Bootstrap中有效地重新创建模态隐藏功能似乎有点麻烦，所以我找到了一个更清晰的解决方案 .
问题是当你打电话时会发生一系列事件
$("#myModal").modal('hide'); functionThatEndsUpDestroyingTheDOM()
当您因为AJAX请求而替换一堆HTML时，模态隐藏事件无法完成 . 但是，当一切都是 finished 时，Bootstrap会触发一个事件，你可以像这样挂钩：
$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);
希望这有用！
在您的操作按钮中插入：
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-backdrop . 关于它的文档在这个链接：http://getbootstrap.com/javascript/#modals-usage
如果您使用getboostrap网站本身的副本并粘贴到html生成的选择器中，请确保删除注释“<！ - /.modal - >” . Bootstrap感到困惑，并认为评论是第二个模态元素 . 它为这个“第二”元素创建了另一个后退 .
我遇到了类似的问题：在我的模态窗口中，我有两个按钮，"Cancel"和"OK" . 最初，两个按钮都会通过调用 $('#myModal').modal('hide') （之前执行某些代码的"OK"）关闭模态窗口，方案如下：
$('#myModal').modal('hide')
打开模态窗口
做一些操作，然后点击"OK"确认它们并关闭模态
再次打开模态并单击"Cancel"关闭
重新打开模态，再次单击"Cancel" ==>背景不再可访问！
好吧，我的下一个 table 保存了我的一天：不是调用 $('#myModal').modal('hide') ，而是给你的按钮属性 data-dismiss="modal" 并在"Submit"按钮上添加一个"click"事件 . 在我的问题中，按钮的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 });
而没有"click"事件归因于"Cancel"按钮 . 模态现在正确关闭，让我再次使用"normal"页面播放 . 实际上似乎 data-dismiss="modal" 应该是指示按钮（或任何DOM元素）应该关闭Bootstrap模式的唯一方法 . .modal('hide') 方法似乎表现得不太可控 .
.modal('hide')
希望这可以帮助！
在.net MVC4项目中，我在Ajax.BeginForm（OnComplete =“addComplete”[额外代码已删除]）中弹出了模式弹出（bootstrap 3.0） . 在“addComplete”javascript里面，我有以下代码 . 这解决了我的问题 .
$（'＃moreLotDPModal'） . hide（）; $（“＃moreLotDPModal”） . data（'bs.modal'） . isShown = false; $（ '主体'）removeClass（ '模式开'） . $（“模式，背景”）删除（）; $（ '＃moreLotDPModal'）removeClass（ “中”） . $（'＃moreLotDPModal'） . attr（'aria-hidden'，“true”）;
如果您隐藏然后再次显示模式窗口太快，也会发生此问题 . 这在其他地方提到了问题，但我将在下面提供更多细节 .
问题与时间和淡入淡出过渡有关 . 如果在前一个模态的淡出过渡完成之前显示模态，您将看到这个持续的背景问题（模态背景将保留在屏幕上，以您的方式） . Bootstrap显然不支持多个同步模态，但即使您隐藏的模态和您显示的模态相同，这似乎也是一个问题 .
如果这是您的问题的正确原因，这里有一些减轻问题的选项 . 选项＃1是一个快速简便的测试，用于确定淡入淡出过渡时间是否确实是导致问题的原因 .
禁用模态的淡化动画（从对话框中删除"fade"类）
更新模态的文本，而不是隐藏和重新显示它 .
修正时间以便它赢得了't show the modal until it'完成隐藏前一个模态 . 使用模态的事件来执行此操作 . 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
.modal（ '隐藏'）
手动隐藏模态 . Returns to the caller before the modal has actually been hidden （即在hidden.bs.modal事件发生之前） .
而不是
$('#myModal').modal('hide'); $('#someOtherSelector').trigger('click');
做
$('#myModal').modal('hide'); $('#myModal').on('hidden.bs.modal', function() { $('#someOtherSelector').trigger('click'); });
因此，您一定要等到“隐藏”事件结束 .
即使我遇到了类似的问题，我还有以下两个按钮
<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'按钮的click事件 . 这工作:)
使用：
$('.modal.in').modal('hide')
Source
我知道这是一个非常古老的帖子，但这可能会有所帮助 . 这是我的一个非常小的解决方法
$('#myModal').trigger('click');
多数民众赞成，这应该解决问题
这个解决方案适用于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的起点 .
updatepanel问题 .
我的问题是由于更新面板的位置 . 我在updatepanel中有完整的模态 . 如果你在updatepanel之外声明模态并且只是在更新面板中说出模态体，那么就是$（'＃myModalID'） . modal（'hide'）;工作 .
另一个可能产生这个问题的错误，
Make sure you didn't included bootstrap.js script more than once in your page!
对这个问题的另一种观点 . （我正在使用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" add on html，它确实会消失 .
因此我的问题的解决方案是仅在javascript中手动初始化模态而不使用数据属性，这样我可以手动关闭模态并使用 data-dismiss="modal" 功能 .
希望如果您遇到与我相同的问题，这将有所帮助 .
仅供参考，如果有人遇到这种情况......我花了大约3个小时才发现最好的方法如下：
$("#my-modal").modal("hide"); $("#my-modal").hide(); $('.modal-backdrop').hide(); $("body").removeClass("modal-open");
关闭模态的功能非常不直观 .
使用切换而不是隐藏，解决了我的问题
对于与模态组件无关的元素，请确保您没有在其他地方使用相同的元素Id / class .
那就是..如果您要识别使用类名“myModal”触发模态弹出窗口的按钮，请确保没有不相关的元素具有相同的类名 .
我有同样的问题 .
但是我使用的是bootbox.js，所以它可能与之有关 .
无论哪种方式，我意识到这个问题是由一个元素与它的父类相同的类引起的 . 当其中一个元素用于绑定单击函数以显示模态时，则会出现问题 .
即这是导致问题的原因：
<div class="myElement"> <div class="myElement"> Click here to show modal </div> </div>
更改它，以便被单击的元素与其父级，任何子级或任何其他祖先不具有相同的类 . 在绑定点击函数时，通常可以这样做 .
我正在使用Meteor，我遇到了同样的问题 . 我的bug的原因是这样的：
{{#if tourmanager}} {{>contactInformation tourmanager}} {{else}} <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a> {{>addArtistTourmanagerModal}} {{/if}}
正如你所看到的，我在else中添加了模态，所以当我的模态更新了contactinformation时，if有另一个状态 . 这导致模态模板在关闭之前就被排除在DOM之外 .
解决方案：将模态移出if-else：
//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/
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++; }); });
我有模态背景屏幕冻结问题，但在一个稍微不同的情况：当显示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);
我猜其他解决方案有效，因为他们花了足够的额外时间为浏览器提供所需的清理时间 .
在ASP.NET中，在jquery命令后面的代码上添加UpdatePanel的更新 . 例：
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true); upModal.Update();
来自https://github.com/twbs/bootstrap/issues/19385
Modal的show / hide方法是异步的 . 因此，代码如：foo.modal（“hide”）; bar.modal（ “节目”）;是无效的 . 在再次调用show或hide方法之前，您需要等待显示/隐藏实际完成（通过侦听显示/隐藏的事件;请参阅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（），则一切正常 .
30 回答
我有同样的问题 . 我发现这是由于Bootstrap和JQueryUI之间的冲突 .
两者都使用“关闭”类 . 在一个或另一个中更改类修复此问题 .
$（ '＃myModal'）触发器（ '点击'）;
这对我有用 . 它没有关闭，因为当你打开弹出窗口时它会触发2或3个模态背景 . 所以当你做$（'＃myModal'）） . modal（'hide'）;它只影响一个模态背景和休息 .
在执行AJAX请求时，请确保不要替换包含实际模态窗口的容器，因为当您尝试关闭它时，Bootstrap将无法找到对它的引用 . 在Ajax完整处理程序中删除模态然后替换数据 .
如果这不起作用，您可以通过执行以下操作来强制它消失：
确保初始调用
$.modal()以应用模态行为不会传递超出预期的元素 . 如果发生这种情况，最终将为集合中的EACH元素创建一个带有背景元素的模态实例 . 因此，看起来背景可能已被遗忘，实际上你正在查看其中一个副本 .就我而言，我试图用这样的代码动态创建模态内容：
在这里，关闭
</div>标签后的HTML注释意味着myModal实际上是两个元素的jQuery集合 - div和注释 . 他们两个都尽职尽责地变成了模态，每个都有自己的背景元素 . 当然，除了背景之外，评论所形成的模态是不可见的，所以当我关闭真实模态（div）时，它看起来就像是背景被遗忘了 .我只是花了太长时间才解决这个问题:)
虽然提供的其他答案都是有用且有效的，但是我从Bootstrap中有效地重新创建模态隐藏功能似乎有点麻烦，所以我找到了一个更清晰的解决方案 .
问题是当你打电话时会发生一系列事件
当您因为AJAX请求而替换一堆HTML时，模态隐藏事件无法完成 . 但是，当一切都是 finished 时，Bootstrap会触发一个事件，你可以像这样挂钩：
希望这有用！
在您的操作按钮中插入：
和
例：
如果输入此data-attr，则不会显示.modal-backdrop . 关于它的文档在这个链接：http://getbootstrap.com/javascript/#modals-usage
如果您使用getboostrap网站本身的副本并粘贴到html生成的选择器中，请确保删除注释“<！ - /.modal - >” . Bootstrap感到困惑，并认为评论是第二个模态元素 . 它为这个“第二”元素创建了另一个后退 .
我遇到了类似的问题：在我的模态窗口中，我有两个按钮，"Cancel"和"OK" . 最初，两个按钮都会通过调用
$('#myModal').modal('hide')（之前执行某些代码的"OK"）关闭模态窗口，方案如下：打开模态窗口
做一些操作，然后点击"OK"确认它们并关闭模态
再次打开模态并单击"Cancel"关闭
重新打开模态，再次单击"Cancel" ==>背景不再可访问！
好吧，我的下一个 table 保存了我的一天：不是调用
$('#myModal').modal('hide')，而是给你的按钮属性data-dismiss="modal"并在"Submit"按钮上添加一个"click"事件 . 在我的问题中，按钮的HTML（好吧，TWIG）代码是：在我的JavaScript代码中，我有：
而没有"click"事件归因于"Cancel"按钮 . 模态现在正确关闭，让我再次使用"normal"页面播放 . 实际上似乎
data-dismiss="modal"应该是指示按钮（或任何DOM元素）应该关闭Bootstrap模式的唯一方法 ..modal('hide')方法似乎表现得不太可控 .希望这可以帮助！
在.net MVC4项目中，我在Ajax.BeginForm（OnComplete =“addComplete”[额外代码已删除]）中弹出了模式弹出（bootstrap 3.0） . 在“addComplete”javascript里面，我有以下代码 . 这解决了我的问题 .
如果您隐藏然后再次显示模式窗口太快，也会发生此问题 . 这在其他地方提到了问题，但我将在下面提供更多细节 .
问题与时间和淡入淡出过渡有关 . 如果在前一个模态的淡出过渡完成之前显示模态，您将看到这个持续的背景问题（模态背景将保留在屏幕上，以您的方式） . Bootstrap显然不支持多个同步模态，但即使您隐藏的模态和您显示的模态相同，这似乎也是一个问题 .
如果这是您的问题的正确原因，这里有一些减轻问题的选项 . 选项＃1是一个快速简便的测试，用于确定淡入淡出过渡时间是否确实是导致问题的原因 .
禁用模态的淡化动画（从对话框中删除"fade"类）
更新模态的文本，而不是隐藏和重新显示它 .
修正时间以便它赢得了't show the modal until it'完成隐藏前一个模态 . 使用模态的事件来执行此操作 . 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
.modal（ '隐藏'）
手动隐藏模态 . Returns to the caller before the modal has actually been hidden （即在hidden.bs.modal事件发生之前） .
而不是
做
因此，您一定要等到“隐藏”事件结束 .
即使我遇到了类似的问题，我还有以下两个按钮
我想执行一些ajax操作，并且在ajax操作成功时关闭模态 . 所以这就是我所做的 .
我触发了具有
data-dismiss="modal"属性的'No'按钮的click事件 . 这工作:)使用：
Source
我知道这是一个非常古老的帖子，但这可能会有所帮助 . 这是我的一个非常小的解决方法
多数民众赞成，这应该解决问题
这个解决方案适用于Ruby on Rails 3.x和一个js.erb文件，它可以重建部分DOM，包括模态 . 无论ajax调用是来自模态还是来自页面的不同部分，它都可以工作 .
感谢@BillHuertas的起点 .
updatepanel问题 .
我的问题是由于更新面板的位置 . 我在updatepanel中有完整的模态 . 如果你在updatepanel之外声明模态并且只是在更新面板中说出模态体，那么就是$（'＃myModalID'） . modal（'hide'）;工作 .
另一个可能产生这个问题的错误，
Make sure you didn't included bootstrap.js script more than once in your page!
对这个问题的另一种观点 . （我正在使用bootstrap.js版本3.3.6）
我错误地在javascript中手动初始化模态：
并通过使用
data-toggle="modal"在此按钮中，如下例所示（显示在文档中）
所以结果它创建了两个实例
打开模态时附加到我的html正文 . 这可能是使用函数关闭模态时的原因：
它只删除一个背景实例（如上所示），因此背景不会消失 . 但是如果你在bootstrap doc中使用
data-dismiss="modal"add on html，它确实会消失 .因此我的问题的解决方案是仅在javascript中手动初始化模态而不使用数据属性，这样我可以手动关闭模态并使用
data-dismiss="modal"功能 .希望如果您遇到与我相同的问题，这将有所帮助 .
仅供参考，如果有人遇到这种情况......我花了大约3个小时才发现最好的方法如下：
关闭模态的功能非常不直观 .
使用切换而不是隐藏，解决了我的问题
对于与模态组件无关的元素，请确保您没有在其他地方使用相同的元素Id / class .
那就是..如果您要识别使用类名“myModal”触发模态弹出窗口的按钮，请确保没有不相关的元素具有相同的类名 .
我有同样的问题 .
但是我使用的是bootbox.js，所以它可能与之有关 .
无论哪种方式，我意识到这个问题是由一个元素与它的父类相同的类引起的 . 当其中一个元素用于绑定单击函数以显示模态时，则会出现问题 .
即这是导致问题的原因：
更改它，以便被单击的元素与其父级，任何子级或任何其他祖先不具有相同的类 . 在绑定点击函数时，通常可以这样做 .
我正在使用Meteor，我遇到了同样的问题 . 我的bug的原因是这样的：
正如你所看到的，我在else中添加了模态，所以当我的模态更新了contactinformation时，if有另一个状态 . 这导致模态模板在关闭之前就被排除在DOM之外 .
解决方案：将模态移出if-else：
小提琴 - >https://jsfiddle.net/o6th7t1x/4/
data-backdrop 属性的初始值可以是
“静态”，“真实”，“虚假” .
static 和 true 添加模态阴影，而 false 禁用阴影，因此您只需要在第一次单击为false时更改此值 . 像这样：
我有模态背景屏幕冻结问题，但在一个稍微不同的情况：当显示2个背对背模态 . 例如第一个会要求确认执行某些操作，并且在单击“确认”按钮后，操作将遇到错误，并且将显示第二个模式以弹出错误消息 . 第二个模态背景会冻结屏幕 . 类名中没有冲突或元素的id .
解决问题的方法是给浏览器足够的时间来处理模态背景 . 点击“确认”后，不要立即采取行动，给浏览器说500ms隐藏第一个模态并清理背景等 - 然后采取最终显示错误模式的操作 .
_dialogConfirmed（）函数具有以下代码：
我猜其他解决方案有效，因为他们花了足够的额外时间为浏览器提供所需的清理时间 .
在ASP.NET中，在jquery命令后面的代码上添加UpdatePanel的更新 . 例：
来自https://github.com/twbs/bootstrap/issues/19385
当我打开相同的模态两次太快时，我遇到了这个问题，所以一个简单的修复方法是检查它是否已经显示，然后再次显示：
试试这个
这对我来说可以 .
我有类似的问题 . 我正在将Boostrap与Backbone结合使用，我正在捕获“Do it”按钮的点击，然后停止传播这些事件 . 奇怪的是，这使得模态消失了，但不是背景 . 如果我调用event.preventDefault（）但不调用stopPropagation（），则一切正常 .