Twitter引导模态背景不会消失

我正在使用Twitter引导模式对话框。 当我点击引导模式对话框的提交button时，它发送一个AJAX请求。 我的问题是，模态背景并没有消失。 modal dialog确实消失，但是在屏幕上创build不透明度的“模态背景”仍然保留

我能做什么？

Answer 1

请确保在执行AJAX请求时不会replace包含实际模态窗口的容器，因为在尝试closuresBootstrap时，Bootstrap将无法find它的引用。 在您的Ajax完整处理程序中删除模式，然后replace数据。

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

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

Answer 2

确保最初调用$.modal()来应用模态行为不会传入比您想要的更多的元素。 如果发生这种情况，它将最终为集合中的EACH元素创build一个模式实例，并带有背景元素。 因此，当你看到其中一个副本时，它可能看起来像是背后的背景。

在我的情况下，我试图用一些代码来实时创build模态内容：

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

这里，closures</div>标签之后的HTML注释意味着myModal实际上是一个包含两个元素（div和注释）的jQuery集合。 他们两个都忠实地变成了模态，每个模态都有自己的背景元素。 当然，除了背景之外，由评论构成的模态是不可见的，所以当我closures真正的模态（div）时，看起来背景被留下了。

Answer 3

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

虽然提供的其他答案是有帮助和有效的，但是从Bootstrap有效地重新创build模式隐藏function似乎有点麻烦，所以我find了一个更清晰的解决scheme。

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

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

当你作为AJAX请求的结果replace了一堆HTML时，模态隐藏事件不能完成。 但是，Bootstrap在一切完成时触发一个事件，并且可以像这样挂钩：

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

希望这是有帮助的！

Answer 4

插入您的操作button：

 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> 

如果你input这个数据，那么.modal-backdrop不会出现。 有关它的文档在这个链接： http : //getbootstrap.com/javascript/#modals-usage

Answer 5

如果您正在使用getboostrap网站自身的副本并粘贴到生成的htmlselect器中，请确保删除了注释“<！ – / .modal – >”。 Bootstrap会感到困惑，并认为该评论是第二个模态元素。 它为这个“第二”元素创造了另一个回落。

Answer 6

我遇到了类似的问题：在我的模式窗口中，我有两个button，“取消”和“确定”。 最初，这两个button将通过调用$('#myModal').modal('hide') （以前执行一些代码的“OK” $('#myModal').modal('hide')closures模式窗口，场景如下：

1. 打开模式窗口
2. 做一些操作，然后点击“OK”确认它们并closures模式
3. 再次打开模式，点击“取消”
4. 重新打开模式，再次点击“取消”==>背景不再可用！

好吧，我的同事下一个桌子救了我的一天：而不是调用$('#myModal').modal('hide') ，给你的button属性data-dismiss="modal"并添加一个“点击”提交“button。 在我的问题中，button的HTML（well，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 }); 

而没有“点击”事件归因于“取消”button。 现在模式正常closures，让我再次玩“正常”页面。 实际上，似乎data-dismiss="modal"应该是指示button（或任何DOM元素）应该closuresBootstrap模式的唯一方法。 .modal('hide')方法似乎performance得不太可控。

希望这可以帮助！

Answer 7

.modal（ '隐藏'）

手动隐藏模式。 在模态已经被隐藏之前（即在发生hidden.bs.modal事件之前） 返回给调用者 。

所以，而不是

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

做

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

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

Answer 8

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

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

如果这是您的问题的正确原因，这里有一些选项来减轻这个问题。 选项＃1是一个快速简单的testing，以确定淡入淡出的转换时间是否确实是您的问题的原因。

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

这里有一些相关的bootstrap问题跟踪器post。 有可能是有更多的跟踪器post比我下面列出。

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

Answer 9

即使我遇到类似的问题，我有以下两个button

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

我想执行一些Ajax操作，并成功的那个Ajax操作closures模式。 所以这就是我所做的。

 $.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"属性的“否”button的点击事件。 这工作:)

Answer 10

使用：

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

资源

Answer 11

这个解决scheme是用于Ruby on Rails 3.x和一个js.erb文件，它重build了包括模态在内的DOM的一部分。 无论Ajax调用来自模式还是页面的不同部分，它都可以工作。

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

感谢@BillHuertas的出发点。

Answer 12

更新面板问题。

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

Answer 13

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

确保在页面中不会多次包含bootstrap.js脚本！

Answer 14

对这个问题的另一个观点。 （我正在使用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> 

所以结果它创build了两个实例

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

当打开模式时附加到我的html的正文。 这可能是使用函数closures模式的原因：

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

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

所以我的问题的解决scheme是只在JavaScript中手动初始化模态，而不是使用数据属性。这样我就可以手动closures模式，并通过使用data-dismiss="modal"function。

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

Answer 15

仅供参考，如果有人遇到这个仍然…我花了大约3小时，发现最好的办法做到这一点如下：

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

那个closures模式的函数是非常不直观的。

Answer 16

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

也就是说，如果您使用类名“myModal”来标识触发模式popup窗口的button，请确保没有不相关的元素具有相同的类名称。

Answer 17

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

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

Answer 18

在.net MVC4项目中，我popup的模式（bootstrap 3.0）在Ajax.BeginForm（OnComplete =“addComplete”[extra code deleted]）内。 里面的“addComplete”的JavaScript我有以下代码。 这解决了我的问题。

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

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

$（ '主体'）removeClass（ '模式开'）。

$（“模式，背景”）删除（）;

$（ '＃moreLotDPModal'）removeClass（ “中”）。

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

Answer 19

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

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

Answer 20

我有这个同样的问题。

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

无论哪种方式，我意识到这个问题是由与父类相同的类的元素造成的。 当使用这些元素之一来绑定点击function来显示模式时，就会出现问题。

即这是什么原因造成的问题：

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

改变它，以便被点击的元素与它的父项，它的任何子项或任何其他祖先不具有相同的类。 在绑定点击function时，一般这样做可能是很好的做法。

Answer 21

我正在与meteor合作，而我也遇到了同样的问题。 我的错误的原因是这样的：

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

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

解决scheme：将模态移出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 22

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

Answer 23

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

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

静态和真实添加模式阴影，而假禁用阴影，所以你只需要改变这个值，第一次点击为假。 喜欢这个：

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

Answer 24

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

Answer 25

我有模态背景屏幕冻结问题，但在一个稍微不同的情况：当2背靠背模式正在显示。 例如，第一个会要求确认来执行某些操作，点击“确认”button后，操作会遇到错误，第二个模式将显示以popup错误消息。 第二个模态背景会冻结屏幕。 在类名或元素的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); 

我猜测其他解决scheme的工作，因为他们花了足够多的时间给浏览器所需的清理时间。

Answer 26

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

莫代尔的显示/隐藏方法是asynchronous的。 所以代码如：

foo.modal("hide"); bar.modal("show"); 是无效的。 在调用显示或隐藏方法之前，您需要等待显示/隐藏实际完成（通过监听显示的/隐藏的事件;请参阅http://getbootstrap.com/javascript/#modals-events ）。

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

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

Answer 27

尝试这个

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

它对我来说工作正常。

Answer 28

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

Answer 29

在我的模式中的任何button上添加data-dismiss="modal"为我工作。 我想我的button来调用一个angular度函数来触发ajax调用，并closures模式，所以我在函数中添加了一个.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 }) }