각의 모달 닫히지 않게 하려면 어떻게 해야 하나요?
프로젝트 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
'programing' 카테고리의 다른 글
AngularJs .$setPris틴에서 폼 리셋 (0) | 2023.03.17 |
---|---|
유형 스크립트 맵에 대한 반복 (0) | 2023.03.17 |
요청이 중단되었는지 탐지하는 방법 (0) | 2023.03.17 |
typed - 'type' 또는 'interface'로서의 소품 (0) | 2023.03.17 |
MongoDB의 인덱스 목록? (0) | 2023.03.17 |