Don't use blockUI when open bootstrap modal dialog

Question

I use jquery BlockUI plugin to lock screen when request is executed. By default i set it for every ajax call. But i also have Bootstrap modals which load data inside using 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);

Problem - when i open modal screen become to dark (2 blockUI is applied). How can i unblockUI when modal is opened (use just Bootstrap background locker)?

What i tried :

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

OR

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

but this didn't work. It seems that BlockUI plugin block screen a bit later.

Answer 1

You're registering a global event handler which triggers for any AJAX call. The code doesn't make a distinction on the context.

Unfortunately, you can't access the details of the AJAX request from the ajaxStart handler. Otherwise, I'd suggest to pass an extra option like blockUI: true to the request which the handler would then use.

Instead, you will have to move the code for $.blockUI({...}); into a helper function (so you don't have to write it every time). You now have to call this helper function every time you make an AJAX call where you want to block the UI. A good place for calling the new helper function is the beforeSend callback.