Angular UI 부트스트랩 팝오버 바깥쪽을 클릭할 때 숨기기
.이 팝오버의 .document ★★★★★★★★★★★★★★★★★」body그건 팝오버가 아니야
이 작업을 수행하는 가장 가까운 방법은 디렉티브(이 답변 발견)를 작성하는 것이지만 변수가 true 또는 false일 경우 수동 트리거를 위한 것입니다.
팝오버가 아닌 다른 항목을 클릭했을 때 닫는 방법을 아는 사람 있나요?
는 jQuery jQuery를 사용해도.$(document).click(function(e){});그냥 어떻게 마무리 지어야 할지 모르겠어.
<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
통상은 「」입니다.popover-trigger="focus"하지만 팝오버에는 클릭해야 하는 콘텐츠가 포함되어 있습니다.는 i i나 an an an i i i i i i i 。ng-click포커스 트리거를 사용하면 무시되는 팝오버 안에 있기 때문에, 나는 그것을 피할 수 있는 일반적인 방법을 찾고 있다.
업데이트: 1.0 릴리스에서는 새로운 트리거가 추가되었습니다.outsideClick사용자가 팝오버 또는 툴팁 외부를 클릭하면 자동으로 팝오버 또는 툴팁이 닫힙니다.
0 있을 때 0.14.0을 통해 할 수 기능이 되었습니다.tooltip-is-open ★★★★★★★★★★★★★★★★★」popover-is-open★★★★★★ 。
UI .0 이후 UI 부트스트랩 1.0.이 추가되었습니다.outsideClick툴팁 및 팝오버에 대한 트리거(이 풀 요청에서 도입됨Angular UI 부트스트랩 2.0.0에서는popover-trigger는 각도 표현식(Changelog)을 사용하도록 수정되었으므로 값을 따옴표로 묶어야 합니다.이 코드는 현재 버전의 angular-ui에서 작동합니다.
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'"
popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
이 코드는 이전 버전의 Angular UI 부트스트랩(2.0.0 이전)에서 작동합니다.
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
편집:
플런커 데모
다음은 작동 방식입니다(아직도 길고 자세한 설명).
- 트리거 요소를 대상으로 지정할 수 있는 사용자 지정 지시문을 만듭니다.
- 본문에 추가되어 트리거 요소를 찾은 후 클릭할 때 사용자 지정 이벤트를 발생시키는 사용자 지정 지시문을 만듭니다.
트리거 요소를 대상으로 하는 사용자 지정 지시문을 만듭니다.
팝오버를 연 요소에서 커스텀이벤트 핸들러를 트리거해야 합니다(데모에서는 이것이 버튼입니다).문제는 팝오버가 이 요소에 형제로서 추가된다는 것입니다.DOM을 통과하고 특정 구조를 가질 것으로 예상할 때 항상 문제가 발생할 가능성이 높다고 생각합니다.트리거 요소를 대상으로 할 수 있는 방법은 여러 가지가 있지만, 요소를 클릭할 때 고유한 클래스 이름을 요소에 추가하는 방법('트리거'를 선택합니다)이 있습니다.이 시나리오에서는 한 번에 하나의 팝오버만 열 수 있으므로 클래스 이름을 사용하는 것이 안전하지만 원하는 대로 수정할 수 있습니다.
커스텀 디렉티브
app.directive('popoverElem', function(){
return{
link: function(scope, element, attrs) {
element.on('click', function(){
element.addClass('trigger');
});
}
}
});
버튼에 적용됨
<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>
문서 본문(또는 다른 요소)에 대한 사용자 정의 지시문을 작성하여 팝오버 닫기를 트리거합니다.
마지막으로 트리거 요소를 찾아 적용되는 요소를 클릭할 때 팝오버를 닫는 커스텀디렉티브를 작성하고 커스텀이벤트를 기동합니다물론 '트리거' 요소에서 초기 클릭 이벤트를 제외해야 하며 팝오버 내부에서 상호 작용하려는 요소를 제외해야 합니다.따라서 exclude-class라는 Atribut을 추가하여 클릭 이벤트를 무시해야 하는 요소에 추가할 수 있는 클래스를 정의합니다(팝오버가 닫히지 않음).
문제를 해결하기 위해 이벤트핸들러가 트리거되면 트리거 요소에 추가된 트리거 클래스를 삭제합니다.
app.directive('popoverClose', function($timeout){
return{
scope: {
excludeClass: '@'
},
link: function(scope, element, attrs) {
var trigger = document.getElementsByClassName('trigger');
function closeTrigger(i) {
$timeout(function(){
angular.element(trigger[0]).triggerHandler('click').removeClass('trigger');
});
}
element.on('click', function(event){
var etarget = angular.element(event.target);
var tlength = trigger.length;
if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
for(var i=0; i<tlength; i++) {
closeTrigger(i)
}
}
});
}
};
});
페이지* 전체가 팝오버의 무시 가능한 배경으로서 기능하도록 본문 태그에 이것을 추가했습니다.
<body popover-close exclude-class="exclude">
그리고 팝오버 입력에 exclude 클래스를 추가했습니다.
<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">
몇 가지 수정사항과 수정사항들이 있지만, 그건 당신에게 맡기겠습니다.
- popover-close 디렉티브의 링크 함수에서 기본 제외 클래스를 설정해야 합니다.
- 팝오버 클로즈 디렉티브는 요소 바인딩이므로 HTML 및 본문 요소에 설정한 스타일을 삭제하여 높이를 100%로 하면 콘텐츠가 채워지지 않으면 뷰포트 내에 '데드 영역'이 있을 수 있습니다.
Chrome, Firefox 및 Safari에서 테스트 완료.
popover-trigger="'outsideClick'"이건 완벽하게 작동될 거야.
popover-trigger="outsideClick"이건 아니야.
왜 안 되는지 하루 만에 해결했어요.
이을 하고 때문입니다."if (trigger === 'outsideClick')"
String으로 전달해야 하는 강력한 유형 확인 때문입니다.
이 있어요.popover-trigger할 수 .focus 로.
<button
popover-placement="right"
popover="On the Right!"
popover-trigger="focus"
class="btn btn-default">
Right
</button>
이거면 성공! :)
편집: 툴팁을 클릭하여 포커스를 잃지 않도록 하려면 다음과 같은 방법을 고려하십시오.
각도로 작동하려면 고유한 트리거 정의를 만들어 보십시오.이 방법에 대한 제안 사항은 여기를 참조하십시오.
당신이 찾고 있는 것은
<button
popover-trigger="outsideClick"
class="btn btn-default">
Right
</button>
문서 - outsideClick 트리거는 클릭 시 팝오버를 전환하고 다른 클릭 시 숨깁니다.
다음을 사용할 수 있습니다.
마크업
<div ng-app="Module">
<div ng-controller="formController">
<button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus"
popover-placement="left" type="button" class="btn btn-default">
Popover With Template
</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span>prasad!!</span>
</div>
</script>
</div>
</div>
자바스크립트
<script type="text/javascript">
var app = angular.module("Module", ['ui.bootstrap']);
app.controller("formController", ['$scope', function($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html'
};
}]);
</script>
저도 같은 문제가 있었고popover-trigger="'outsideClick'"날 위해 일했어문서에는 이 문제가 기재되어 있지 않은 것이 흥미롭습니다.
'$uibTooltipProvider' setTriggers 메서드의 'outsideClick' 옵션은 어떻게 됩니까?설명서에는 "outsideClick 트리거로 인해 툴팁이 클릭 시 전환되고 다른 클릭 시 숨겨집니다."라고 나와 있습니다.문서
아웃사이드 클릭 기능이 있는 앵글 부스트랩 UI 신버전 1.x.새 버전으로 업그레이드합니다.
<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>
나한텐 효과가 있어
팝오버에서 이벤트를 클릭하거나 제출 버튼을 누르면 포커스가 작동하지 않습니다. 그래서 이 유용한 방법을 사용할 수 있습니다.
더하다onclick="void(0)"일부 배경 요소에 대한 동작. 누르면 팝오버가 제거됩니다.
https://github.com/angular-ui/bootstrap/issues/2123 를 참조해 주세요.
1) 팝오버에는 ng-bootstrap을 사용합니다.
2) ng-bootstrap 버전을 3.0.0 이상으로 업데이트합니다.즉, npm install --save @ng-bootstrap/ng-bootstrap@ 3.0.0
3) 업데이트 후 Ngbopover의 [autoClose] 기능을 사용할 수 있습니다.
<button type="button" class="btn btn-outline-secondary" popoverTitle="Pop title" [autoClose]="true" ngbPopover="Click anywhere or press Escape to close (try the toggling element too)">Click to toggle</button>
4) 도움이 되길!
언급URL : https://stackoverflow.com/questions/30512748/hide-angular-ui-bootstrap-popover-when-clicking-outside-of-it
'programing' 카테고리의 다른 글
| MUI 커스터마이즈 버튼 색상? (0) | 2023.03.27 |
|---|---|
| 지시어를 사용하여 AngularJS 브라우저 자동 채우기 회피책 (0) | 2023.03.27 |
| 아이콘 글꼴을 CSS 속성의 배경으로 설정 (0) | 2023.03.27 |
| Formik, Yup 및 React를 사용한 비동기 검증 (0) | 2023.03.27 |
| 여러 JSON 스키마 파일을 관리하는 방법 (0) | 2023.03.27 |