Не используйте 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 блокаUI). Как я могу разблокировать 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({...}); в вспомогательную функцию (чтобы вам не приходилось писать ее каждый раз). Теперь вы должны вызвать эту вспомогательную функцию каждый раз, когда вы делаете вызов AJAX, где вы хотите заблокировать пользовательский интерфейс. Хорошим местом для вызова новой вспомогательной функции является the beforeSend callback.