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

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

在。net MVC4项目中，我在Ajax中有模态弹出(bootstrap 3.0)。BeginForm(OnComplete = "addComplete"[额外的代码删除])。在“addComplete”javascript中，我有以下代码。这解决了我的问题。

$（'#moreLotDPModal'）.hide（）; $（“#moreLotDPModal”）.data（'bs.modal'）.isDisplay= false; $（'body'）.removeClass（'modal-open'）; $（'.modal-backdrop'）.remove（）; $（'#moreLotDPModal'）.removeClass（“in”）; $（'#moreLotDPModal'）.attr（'aria-hidden'， “true”）;

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

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

这个问题的另一个观点。 (我使用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"特性。

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

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

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

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