Twitter引导模态背景不会消失

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

我能做什么?

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

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

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

确保最初调用$.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)时,看起来背景被留下了。

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

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

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

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

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

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

希望这是有帮助的!

插入您的操作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

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

我遇到了类似的问题:在我的模式窗口中,我有两个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得不太可控。

希望这可以帮助!

.modal( '隐藏')

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

所以,而不是

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

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

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

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

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

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

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

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

即使我遇到类似的问题,我有以下两个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的点击事件。 这工作:)

使用:

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

资源

这个解决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的出发点。

更新面板问题。

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

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

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

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

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

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

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

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

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

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

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

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

在.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”);

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

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

我有这个同样的问题。

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

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

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

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

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

我正在与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}} 
 //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属性的初始值可以是

“静态”,“真”,“假”。

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

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

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

我有模态背景屏幕冻结问题,但在一个稍微不同的情况:当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的工作,因为他们花了足够多的时间给浏览器所需的清理时间。

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

尝试这个

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

它对我来说工作正常。

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

在我的模式中的任何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 }) }