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

我该怎么办?


当前回答

我有模态背景屏幕冻结的问题,但在一个略有不同的场景:当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);

我猜其他解决方案之所以有效,是因为它们花费了足够的额外时间,让浏览器有足够的清理时间。

其他回答

在动作按钮中插入:

data-backdrop="false"

and

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- background将不会出现。 关于它的文档在这个链接:http://getbootstrap.com/javascript/#modals-usage

use:

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

我在提交表单时也遇到了同样的问题。解决方案是将按钮类型从submit更改为button,然后处理按钮单击事件,如下所示:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

在ASP。,在UpdatePanel后面的代码上添加一个更新 jquery命令。例子:

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

这个问题的另一个观点。 (我使用bootstrap.js 3.3.6版本)

我错误地在javascript中手动初始化模态:

$('#myModal').modal({
   keyboard: false
})

通过使用

模态数据-toggle = " "

在下面这个类似按钮的例子中(在文档中显示)

<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的主体。这可能是使用function关闭模态时的原因:

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

它只删除一个背景实例(如上所示),所以背景不会消失。但如果你使用data-dismiss="modal"在html上添加,它就会消失,就像bootstrap doc中显示的那样。

所以我的问题的解决方案是只初始化模式手动在javascript和不使用数据属性,这样我可以关闭模式手动和使用data-dismiss="modal"特性。

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