Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- CSS3
- 어휘력
- CSS
- 프론트엔드
- Whitespace
- css폰트
- 폰트설정
- 제이쿼리
- transform
- sass설치
- FE
- word-spacing
- 2dtransform
- 마음사전
- 여백
- 밑줄
- 언더스코어
- scss
- jquery
- gulp
- mime-type
- 퍼블리싱
- 2D
- 간격조절
- toggleClass
- transition
- issue
- css5
- css3font
- sass
Archives
- Today
- Total
포부리
[jQuery] 다른 영역 클릭시 팝업 닫기 본문
툴팁, 모달에서 자주 사용하는 스크립트
event.target
방법을 이용하여 작성되었다.
function tooltipShow() {
$(".icon-question-badge").each(function(eq, element) {
var btn = $(element);
var tooltipWrap = btn.closest(".box-question-badge");
$(element).click(function() {
tooltipWrap.toggleClass("active");
return false;
});
});
}
$(document).on("touch click", ".icon-question-badge", tooltipShow);
$(document).on("touch click", ".question-badge-after .btn-close", function() {
$(this)
.closest(".box-question-badge")
.removeClass("active");
});
$(document).click(function(e) {
if (
e.target.className === "list-01-item" ||
e.target.className === "question-badge-after"
) {
return false;
}
$(".box-question-badge").removeClass("active");
});
return false
를 넣어주는 것이 중요 포인뚜 ❣️
'또뜨창고' 카테고리의 다른 글
[jQuery] new fileReader 파일첨부 소스 (0) | 2019.12.16 |
---|