javascript — модальный закрывающий вызов Angularjs Bootstrap при нажатии за пределами / esc

Angularjs Bootstrap модальный закрывающий вызов при нажатии снаружи / esc

В моем случае, когда вы щелкали по модалу, мы хотели отобразить подсказку, предупреждающую пользователя о том, что в этом случае все несохраненные данные будут отклонены в модальной форме. Для этого на модале установите следующие параметры:

 var myModal = $uibModal.open({ controller: 'MyModalController', controllerAs: 'modal', templateUrl: 'views/myModal.html', backdrop: 'static', keyboard: false, scope: modalScope, bindToController: true, }); 

Это предотвращает закрытие модального режима при нажатии кнопки:

 backdrop: 'static' 

И это предотвращает закрытие модала при нажатии «esc»:

 keyboard: false 

Затем в модальном контроллере добавьте пользовательскую функцию «отмена» — в моем случае всплывет приятное предупреждение с вопросом, хочет ли пользователь закрыть модал:

  modal.cancel = function () { $timeout(function () { swal({ title: 'Attention', text: 'Do you wish to discard this data?', type: 'warning', confirmButtonText: 'Yes', cancelButtonText: 'No', showCancelButton: true, }).then(function (confirm) { if (confirm) { $uibModalInstance.dismiss('cancel'); } }); }) }; 

И наконец, внутри модального контроллера добавьте следующие прослушиватели событий:

  var myModal = document.getElementsByClassName('modal'); var myModalDialog = document.getElementsByClassName('modal-dialog'); $timeout(function () { myModal[0].addEventListener("click", function () { console.log('clicked') modal.cancel(); }) myModalDialog[0].addEventListener("click", function (e) { console.log('dialog clicked') e.stopPropagation(); }) }, 100); 

«myModal» — это элемент, для которого вы хотите вызвать функцию обратного вызова modal.cancel (). «myModalDialog» — это окно модального содержимого — мы прекращаем распространение события для этого элемента, чтобы оно не всплыло до «myModal».

Это работает только для нажатия модальной (другими словами, щелкая фоном). Нажатие «esc» не вызовет этот обратный вызов.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector