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

我该怎么办?


当前回答

数据背景属性的初始值可以是

“静态”、“真”、“假”。

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

$(文档)。(“准备好”,函数(){ var计算= 0; $ (' # id-which-triggers-modal ')。(“点击”,函数(){ 如果(数> 0){ (美元).attr(“data-backdrop”,“假”) } 数+ +; }); });

其他回答

在模式中的任何按钮上添加data-dismiss="modal"对我来说都很有效。我想让我的按钮调用angular函数来触发ajax调用并关闭模态,所以我在函数中添加了.toggle(),它工作得很好。(在我的情况下,我使用了一个bootstrap模态和使用一些角,而不是一个实际的模态控制器)。

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

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

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

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

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

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

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

我也有同样的问题。

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

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

这就是问题的原因:

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

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

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

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