Twitter bootstrap模态背景不会消失

Question

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

我能做什么？

Answer 1

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

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

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

Answer 2

确保您$.modal()应用模态行为的初始调用不会传递超出预期的元素.如果发生这种情况,它将最终为集合中的EACH元素创建一个带有背景元素的模态实例.因此,看起来背景可能已被遗忘,实际上你正在查看其中一个副本.

就我而言,我试图使用这样的代码动态创建模态内容:

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

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

Answer 3

我只是花了太长时间才解决这个问题:)

虽然提供的其他答案都是有用且有效的,但是我从Bootstrap中有效地重新创建模态隐藏功能似乎有点麻烦,所以我找到了一个更清晰的解决方案.

问题是当你打电话时会发生一系列事件

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

当您因为AJAX请求而替换一堆HTML时,模态隐藏事件无法完成.但是,当一切都完成时,Bootstrap会触发一个事件,你可以像这样挂钩:

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

希望这有用!

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

如果输入此data-attr,则不会显示.modal-backdrop.有关它的文档,请访问此链接:http://getbootstrap.com/javascript/#modals-usage

Answer 5

如果您使用getboostrap网站本身的副本并粘贴到html生成的选择器中,请确保删除注释"<! - /.modal - >".Bootstrap感到困惑,并认为评论是第二个模态元素.它为这个"第二"元素创建了另一个后退.

Answer 6

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

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

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

Answer 7

我遇到了类似的问题:在我的模态窗口中,我有两个按钮,"取消"和"确定".最初,两个按钮都会通过调用$('#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')方法似乎表现得不太可控.

希望这可以帮助!

Answer 8

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

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

如果这是您的问题的正确原因,这里有一些减轻问题的选项.选项#1是一个快速简便的测试,用于确定淡入淡出转换时间是否确实是导致问题的原因.

1. 禁用模态的淡入淡出动画(从对话框中删除"淡入淡出"类)
2. 更新模态的文本而不是隐藏和重新显示它.
3. 修复时间,使其在隐藏上一个模态之前不会显示模态.使用模态的事件来执行此操作.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

Answer 9

.modal( '隐藏')

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

而不是

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

做

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

因此,您一定要等到"隐藏"事件结束.

Answer 10

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

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

Answer 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"属性的"否"按钮的单击事件.这工作:)

Answer 12

使用：

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

资源