Как предотвратить закрытие модального углового интерфейса?

Я использую угловой UI $modal в моем проекте http://angular-ui.github.io/bootstrap/#/modal

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

Как предотвратить модальное закрытие ?

6 77
angularjs angular-ui angularjs-service

6 ответов:

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

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});
170
backdrop : 'static'

будет работать для событий "click", но все же вы можете использовать клавишу" Esc", чтобы закрыть всплывающее окно.

keyboard :false

чтобы предотвратить всплывающее окно рядом с клавишей" Esc".

спасибо pkozlowski.открытый источник для ответа.

Я думаю, что вопрос является дубликатом угловой UI Bootstrap Modal - как предотвратить взаимодействие с пользователем

29

старый вопрос, но если вы хотите добавить диалоги подтверждения для различных действий закрытия, добавьте это в свой модальный контроллер экземпляра:

$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();
    }
});

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

18

Это то, что упоминается в документации

backdrop-контролирует наличие фона. Допустимые значения: true (по умолчанию), false (без фона), 'static' - фон присутствует, но модальное окно не закрывается при щелчке за пределами модального окна.

static может работать.

12

настроить глобально,

оформителя, одна из лучших функций в 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

6

для новой версии ngDialog (0.5.6) используйте:

closeByEscape : false
closeByDocument : false
5