Как предотвратить закрытие Angular-ui modal?

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

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

Как предотвратить закрытие modal ?

77
angular-ui angularjs angularjs-service

6 ответов

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

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

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

keyboard :false

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

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

Я думаю, что вопрос дублируется Angular 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. дает возможность "патч" 3-й партии модулей.

предположим, вы хотите этого поведения во всех $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