source

각도 ui 부트스트랩 모달에서 클릭했을 때 배경 클릭 이벤트를 잡는 방법?

ittop 2023. 10. 29. 20:00
반응형

각도 ui 부트스트랩 모달에서 클릭했을 때 배경 클릭 이벤트를 잡는 방법?

나의 어플리케이션에서, 그것은 다음을 사용하고 있습니다.$modal.open()다른 페이지를 템플릿으로 사용하는 modal 팝업을 여는 함수입니다.버튼을 클릭하는 동안 modal 팝업이 정상적으로 표시됩니다.Cancel 버튼을 클릭하면 이 기능이 호출되고 정상적으로 작동합니다.

    $scope.cancel=function(){
    });

그러나 사용자가 모드 팝업 외부를 클릭하면 이 코드로는 해당 이벤트를 잡을 수 없습니다.

    $scope.dismiss=function(){
    });

그 이벤트는 어떻게 잡을 수 있습니까?

AngularJS의 기사를 많이 보았지만 이에 대한 해결책을 찾지 못했습니다.

$modal.open()약속과 함께 개체를 반환합니다.그래도 약속을 이용해서 사슬로 묶어서 잡을 수 있어요.밖에 있는 배경을 클릭하면 다음과 같이 표시됩니다.dismiss내부적으로 그리고 그것은 약속을 거부합니다.

ex:-

var instance = $modal.open(...);

 instance.result.then(function(){
  //Get triggers when modal is closed
 }, function(){
  //gets triggers when modal is dismissed.
 });

만약 당신이 아이에게 이것은$modalInstance주사를 맞았으니 거기서도 그렇게 할 수 있을 겁니다그래서 기본적으로 그들을 상대하기 보다는event이것은 당신이 약속의 도움으로 더 높은 수준에서 할 수 있도록 도와줍니다.

사용가능

backdrop: 'static'

당신이 선택할 수 있습니다.다음과 같은 경우:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
});

부트스트랩 3.0 설명서는 다음을 설명합니다.backdrop: 'static'클릭 시 모드를 해제하지 않는 배경을 지정합니다.

html 문서를 클릭한 후 modal을 닫습니다.

모드 내부의 클릭을 잡고 전파를 중지합니다.

예.

$("html").on("click",closemodal());

$(".modal").on("click",function(event){
   event.stopPropagation();
}

Angular Mobile UI Demo(1.2)에서도 이와 같은 문제가 있었지만 데모 파일에서는 modal이 main JS에 선언되어 있지 않습니다.

대신 modal1.html에 변수를 두 개 더 추가하는 것이 효과가 있었습니다.

<div class="modal-dialog" ui-outer-click="Ui.turnOff('modal1')" ui-outer-click-if="Ui.active('modal1')">

http://mobileangularui.com/docs/ # outer클릭에 대한 설명입니다.

작동하려면 두 속성이 모두 필요합니다.

언급URL : https://stackoverflow.com/questions/25432149/how-to-catch-backdrop-click-event-when-clicked-out-of-angular-ui-bootstrap-modal

반응형