제이쿼리 잘 모른다. 다시 공부하면 되지 머.
그래서 모달과 같은 예제랑 흥미로운 메서드 위주로 공부했다.
오늘은 애니메이션 효과를 내는 함수 여러 개와 js 모달 예제를 jquery로 바꾸고 살짝 변형해봤다.
먼저 애니메이션 효과 함수부터 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<img
alt=""
style="background-color: transparent"
class="yt-core-image--fill-parent-height yt-core-image--fill-parent-width yt-core-image yt-core-image--content-mode-scale-aspect-fill yt-core-image--loaded"
src="https://i.ytimg.com/vi/NNBJ_prdjIs/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLAiVNdnu2VdvBWtAy4A8V3FOq130A"
/>
<button id="btnSlideToggle">slideToggle</button>
<button id="btnSlideUp">slideUp</button>
<button id="btnSlideDown">slideDown</button>
<button id="btnShow">show</button>
<button id="btnHide">hide</button>
<!-- -->
<button id="btnFadeIn">fadeIn</button>
<button id="btnFadeOut">fadeOut</button>
<script>
/*안 보이는 이미지는 보이게, 보이는 이미지는 안 보이게 한다. + 슬라이드 효과 */
$("#btnSlideToggle").click(function () {
$("img").slideToggle();
});
/* 위로 올라가며 이미지를 감춘다.*/
$("#btnSlideUp").click(function () {
$("img").slideUp("fast");
});
/* 감춰진 이미지를 아래로 천천히 내려가며 보여준다.*/
$("#btnSlideDown").click(function () {
$("img").slideDown("slow");
});
/* 숨은 이미지 보이게 처리*/
$("#btnShow").click(function () {
$("img").show();
});
/* 숨김처리 */
$("#btnHide").click(function () {
$("img").hide();
});
/*희미하게 나타난다.*/
$("#btnFadeIn").click(function () {
$("img").fadeIn();
});
/*희미하게 사라진다. */
$("#btnFadeOut").click(function () {
$("img").fadeOut();
});
</script>
</body>
</html>메서드 설명은 주석으로 충분하다. 모달을 단순히 보이고 숨김처리하는 거라면 .show()와 .hide()로도 충분하다. 근데 좀 더 효과를 추가하고 싶어서 이것저것 공부했다. 슬라이드라서 대각선으로 진행하는게 아쉬웠다.
두번째는 다른 블로그 모달 예제 변형이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<style>
.modal {
opacity: 0;
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s;
}
.modal.opaque {
opacity: 1;
transition: opacity 0.5s;
}
.modal.unstaged {
top: -100px;
height: 0;
}
.modal-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: RGBA(0, 0, 0, 0.6);
}
.modal-contents {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 50px 100px;
width: auto;
max-width: 80%;
max-height: 80%;
text-align: center;
background-color: rgb(255, 255, 255);
border-radius: 6px;
}
.modal-text {
text-align: left;
overflow: auto;
}
.modal-close {
margin-top: 20px;
padding: 5px 20px;
color: #ffffff;
font-weight: bolder;
font-size: 30px;
background-color: #ffaa00;
border-radius: 7px;
cursor: pointer;
transition: all 0.5s;
}
.modal-close:hover {
background-color: #ffd500;
}
</style>
</head>
<body>
<a id="modal-open">click me</a>
<div id="modal-container" class="modal unstaged">
<div class="modal-overlay"></div>
<div class="modal-contents">
<div class="modal-text">this is text</div>
<a id="modal-close" class="modal-close">X</a>
</div>
</div>
<!-- 참고사이트: https://studioplug.tistory.com/352 -->
<script>
$("#modal-open").click(function (e) {
$("#modal-container").toggleClass("opaque");
$("#modal-container").toggleClass("unstaged");
});
$("#modal-close, .modal-overlay").click(function (e) {
$("#modal-container").toggleClass("opaque");
$("#modal-container").on("transitionend", function (e) {
$(this).toggleClass("unstaged");
$(this).off("transitionend", arguments.callee);
});
});
// issue: 모달이 완전히 사라지기도 전에 모달 버튼을 또 누르면 이벤트가 휙 사라진다. 막아야 함.
</script>
</body>
</html>arguments.callee를 새로 알게 되었다.
재귀 함수 호출에 쓴다고 한다. console.log(arguments.callee)를 쳐보면
$("#modal-container").on("transitionend", function (e) {
$(this).toggleClass("unstaged");
$(this).off("transitionend", arguments.callee);
});대충 이런 식으로 본인이 찍힌다.
.toggleClass()는 정말 편한 거 같다. 없으면 있게, 있으면 없게. 확실히 제이쿼리가 간결하고 편하다.
특히 this를 내가 원하는 대로 알잘딱 잡아주니 아주 감격스럽다.
여기에 모달에서 반투명 검은 화면을 클릭했을 때도 모달이 사라지도록 하려고 찾아보니
이벤트에 참조를 여러 개 걸 수도 있다는 것을 깨달았다.
$("#modal-close, .modal-overlay").click(function (e) {위와 같은 식이면 된다. ""안에 ,를 구분자로 같이 넣어야 한다. 첨에 "", "" 이런 식으로 넣었다가
동작 왜 안돼!!! 했었다.(머쓱)
예전에 공부했던 스프링 책에서 나오는 제이쿼리 부분들을 다시 공부해봐야 겠다.
내일도 또 열심히 배운 거 포스팅하자!
경험하고 공부한 것들 풀어서 쓰는 것을 좋아합니다