打开 bootstrap 模态对话框时不要使用 blockUI

Question

我使用 jquery BlockUI 插件在执行请求时锁定屏幕。默认情况下，我为每个 ajax 调用设置它。但我也有 Bootstrap 模态，它使用 ajax 在内部加载数据。

$(document)
.ajaxStart(function() {
    $.blockUI({
        message: $('#img-loader'),
        css: {
            border: 'none', 
            padding: '5px', 
            'background-color': 'transparent', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .6, 
            color: '#fff',
            cursor: 'wait'
        }
    });
})
.ajaxStop($.unblockUI);

问题 - 当我打开模态屏幕时变暗（应用了 2 blockUI）。打开模态时如何取消阻止 UI（仅使用 Bootstrap 后台储物柜）？

我尝试了什么：

$('.modal').on('shown.bs.modal', function() {
    $.unblockUI();
});

或

$('.modal').on('show.bs.modal', function() {
        $.unblockUI();
    });

但这没有用。好像BlockUI插件屏蔽屏幕有点晚了。

Answer 1

您正在注册一个全局事件处理程序，它会触发任何 AJAX 调用。代码不区分上下文。

不幸的是，you can't access the details of the AJAX request from the ajaxStart handler。否则，我建议将一个额外的选项（如 blockUI: true 传递给处理程序随后将使用的请求。

相反，您必须将 $.blockUI({...}); 的代码移动到辅助函数中（这样您就不必每次都编写它）。您现在每次在要阻止 UI 的地方进行 AJAX 调用时都必须调用此辅助函数。调用新辅助函数的好地方是 the beforeSend callback.

打开 bootstrap 模态对话框时不要使用 blockUI

Don't use blockUI when open bootstrap modal dialog

javascript

jquery

ajax

twitter-bootstrap

blockui