[angularjs] Angular-UI 모달이 닫히지 않도록하려면 어떻게해야합니까?

Program / 글쓴이

내 프로젝트에서 Angular UI $ modal을 사용하고 있습니다.
http://angular-ui.github.io/bootstrap/#/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();
    }
});

오른쪽 상단에 ‘취소’작업을 트리거하는 닫기 버튼이 있습니다. 배경을 클릭하면 (활성화 된 경우) 취소 작업이 트리거됩니다. 이를 사용하여 다양한 닫기 이벤트에 대해 다른 메시지를 사용할 수 있습니다.

답변

이것은 문서에 언급 된 것입니다.

배경-배경의 존재를 제어합니다. 허용되는 값 : true (기본값), false (배경 없음), ‘정적’-배경이 있지만 모달 창 외부를 클릭 할 때 모달 창이 닫히지 않습니다.

static 작동 할 수 있습니다.

답변

글로벌 구성,

decorator , 앵귤러 최고의 기능 중 하나입니다. 타사 모듈을 “패치” 하는 기능을 제공합니다.

모든 $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

답변

새 버전의 ngDialog (0.5.6)의 경우 다음을 사용합니다.

closeByEscape : false
closeByDocument : false

답변