programing

각의 모달 닫히지 않게 하려면 어떻게 해야 하나요?

goodsources 2023. 3. 17. 21:27
반응형

각의 모달 닫히지 않게 하려면 어떻게 해야 하나요?

프로젝트 http://angular-ui.github.io/bootstrap/#/modal에서 Angular UI $modal을 사용하고 있습니다.

사용자가 배경을 눌러 모달 닫기를 원하지 않습니다.제가 만든 닫기 버튼을 눌러야만 모달 닫기를 원합니다.

모달 닫힘을 방지하려면 어떻게 해야 합니까?

모달 작성 중 동작을 지정할 수 있습니다.

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});
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();
    }
});

오른쪽 상단에 닫기 버튼이 있는데, 이 버튼은 "취소" 동작을 유발합니다.배경(활성화된 경우)을 클릭하면 취소 액션이 트리거됩니다.이를 사용하여 다양한 종료 이벤트에 대해 서로 다른 메시지를 사용할 수 있습니다.

이것은 설명서에 기재되어 있는 바와 같습니다.

background - 배경의 유무를 제어합니다.허용되는 값: true(기본값), false(배경 없음), 'static' - 배경이 있지만 모달 창 밖을 클릭해도 모달 창이 닫히지 않습니다.

static효과가 있을지도 모릅니다.

글로벌하게 설정,

앵귤러에서 가장 뛰어난 기능 중 하나인 데코레이터.는 서드파티제 모듈을 "수정"할 수 있는 기능을 제공합니다.

를 들어, 모든 레퍼런스에서 이 동작을 사용하고, 콜을 변경하고 싶지 않다고 합시다.

데코레이터를 쓸 수 있어요.옵션을 추가할 수 있습니다.{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

언급URL : https://stackoverflow.com/questions/20286445/how-do-i-prevent-angular-ui-modal-from-closing

반응형