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

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

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

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

68
29 нояб. '13 в 15:59
источник поделиться
6 ответов

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

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});
150
29 нояб. '13 в 16:29
источник
backdrop : 'static'

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

keyboard :false

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

Благодаря pkozlowski.opensource для ответа.

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

27
26 мая '15 в 13:20
источник

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

Фон

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

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

12
29 нояб. '13 в 16:11
источник

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

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

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

12
16 марта '16 в 14:45
источник

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

closeByEscape : false
closeByDocument : false
5
01 февр. '16 в 12:07
источник

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

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

3
15 авг. '16 в 17:46
источник

Посмотрите другие вопросы по меткам или Задайте вопрос