Я использую Angular UI $ modal в своем проекте http://angular-ui.github.io/bootstrap/#/modal
Я не хочу, чтобы пользователь закрыл модальное окно, нажав на фон. Я хочу, чтобы модальное окно можно было закрыть, только нажав созданную мной кнопку закрытия.
Как предотвратить закрытие модального окна?
angularjs
angular-ui
angularjs-service
Рахул Прасад
источник
источник
backdrop : 'static'
Будет работать для событий «щелчок», но вы все равно можете использовать клавишу «Esc», чтобы закрыть всплывающее окно.
keyboard :false
чтобы предотвратить всплывающее окно, закройте клавишей «Esc».
Спасибо pkozlowski.opensource для ответа.
Я думаю, что вопрос дублирует Angular UI Bootstrap Modal - как предотвратить взаимодействие с пользователем
источник
Старый вопрос, но если вы хотите добавить диалоговые окна подтверждения для различных действий закрытия, добавьте это в свой модальный контроллер экземпляра:
$scope.$on('modal.closing', function(event, reason, closed) { console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')'); var message = "You are about to leave the edit view. Uncaught reason. Are you sure?"; switch (reason){ // clicked outside case "backdrop click": message = "Any changes will be lost, are you sure?"; break; // cancel button case "cancel": message = "Any changes will be lost, are you sure?"; break; // escape key case "escape key press": message = "Any changes will be lost, are you sure?"; break; } if (!confirm(message)) { event.preventDefault(); } });
У меня есть кнопка закрытия в правом верхнем углу, которая запускает действие «отменить». При нажатии на фон (если он включен) запускается действие отмены. Вы можете использовать это, чтобы использовать разные сообщения для различных событий закрытия.
источник
event.preventDefault();
insidecase "backdrop click"
и вернитесь, чтобы завершить выполнение.Это то, что упоминается в документации
static
может работать.источник
Настроить глобально,
Decorator , одна из лучших функций angular. дает возможность «патчить» сторонние модули.
Допустим, вы хотите, чтобы такое поведение было во всех ваших
$modal
ссылках, и вы не хотите менять свои вызовы,Можно написать декоратора . это просто добавляет к опциям -
{backdrop:'static', keyboard:false}
angular.module('ui.bootstrap').config(function ($provide) { $provide.decorator('$modal', function ($delegate) { var open = $delegate.open; $delegate.open = function (options) { options = angular.extend(options || {}, { backdrop: 'static', keyboard: false }); return open(options); }; return $delegate; }) });
$modal
переименован в$uibModal
Онлайн-демонстрация - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview
источник
для новой версии ngDialog (0.5.6) используйте:
closeByEscape : false closeByDocument : false
источник