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

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

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

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

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

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

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

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

keyboard :false

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

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

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

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

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

Фон

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

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

+12
29 нояб. '13 в 13: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 в 11:45
источник

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

closeByEscape : false
closeByDocument : false
+5
01 февр. '16 в 9: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 в 14:46
источник

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