CSS + Script 조합으로 버튼 클릭 시 전체 팝업창 나타났다 사라지게 하기
오늘은 CSS3와 간단한 자바스크립트를 활용해서 전체화면으로 나타나게 되는 팝업창 출력에 대해서 배워보았습니다. 조금 복잡하긴한데 이해하고 나니까 어떻게 돌아가는지 좀 알 것 같습니다. 먼저 HTML 부분부터 살펴보겠습니다.
See the Pen jQuery : Click Event (Full PopUp) by rgy0409 (@rgy0409) on CodePen.
HTML과 CSS 버튼을 누르면 마크업 상태 확인이 가능합니다. 본문의 내용을 보시면 크게 두 가지의 div가 존재합니다. 하나는 팝업창이며 다른 하나는 이 팝업창을 띄울 버튼 역할을 하는 div 입니다. 그러면 CSS 스타일시트도 살펴보시기 바랍니다.
CSS에서는 id 값이 popup인 div의 속성을 살펴보시면 화면 전체화면에 대한 팝업이므로 해상도에 상관없이 항상 고정값이어야 하기 때문에 position:fixed; 라고 속성을 부여했습니다. 그리고 평상시에는 숨어있어야 하기 때문에 display:none; 으로 입력했습니다. 가로 및 세로 크기는 100% 로 줘야 해상도에 꽉 차게 될 것입니다. reset 부분에 보시면 전체 태그에 대해서 padding 및 margin 을 0으로 줬기 때문에 단 1px의 여백이 없는 상태 입니다.
#popup 안쪽에 내용이 들어가는 div 부분인 #popmenu는 #popup의 정 중앙에 배치되도록 했습니다. 부모요소인 #popup에 position 값이 들어 있으니 position:absolute; 를 부여하고, left, top 값을 각 50%씩 주었습니다. 여기까지 하면 왼쪽 모서리가 정중앙에 배치되게 됩니다. div의 중심점을 중앙으로 오게 하기 위해서 transform: translate(-50%,-50%); 을 부여했습니다. 또는 #popmenu의 가로 및 세로 크기를 알기 때문에 각 margin 값을 -로 넣어줘도 위치가 이동 됩니다. 여기에서 margin을 사용한다면, margin: -100px 0 0 -150px; 또는 margin-top: -100px; margin-left: -150px; 을 넣어도 됩니다.
.exit 라는 클래스명을 부여받은 div는 닫기 버튼입니다. 위치에 대한 설명은 방금 위에서 설명한 #popmenu의 내용과 거의 일치합니다. 여기까지 완료 되셨다면 바로 미리보기 화면을 띄워 보시기 바랍니다.
보시는 것 처럼 이렇게 출력이 될 것입니다. 하지만 눌러도 변화는 없습니다. 왜냐하면 클릭했을 때의 이벤트 발생에 대한 스크립트를 만들어주지 않았기 때문입니다. 스크립트에 대한 내용은 아래와 같습니다. 여기에서는 내부 스크립트 방식으로 했습니다.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {
$("#contents").click(function() {
$("#popup").fadeIn();
});
$(".exit").click(function() {
$("#popup").fadeOut();
});
});
//]]>
</script>
아시다시피 제이쿼리(jQuery) 파일이 링크방식으로 연결되어 있거나 파일을 저장해 두셔야 이 스크립트가 작동합니다. 여기에서는 링크로 걸어두었습니다. 클릭 이벤트에 대해서 #contents 라고 하는 id 값을 가진 div를 클릭하게 되면, #popup 이라고 하는 id 값을 가진 div를 fadeIn 방식으로 출력하게 되고, .exit 라고 하는 class 값을 가진 div를 클릭하게 되면 #popup id 값을 가진 div가 fadeOut 한다는 스크립트 내용 입니다.
완성된 모습입니다. 이렇게 만드시면 됩니다. 여기서 추가 설명을 하자면 꼭 닫기 버튼을 눌러서 종료하는것이 아닌, 그냥 아무 화면이나 누르면 팝업창이 닫히게 하는 것 또한 간단하게 수정할 수 있습니다.
$("#popup").click(function(){
$("#popup").fadeOut();
});
보시는 것 처럼, .exit 대신 #popup을 넣었습니다. 왜냐하면 전체창 형태의 팝업이다보니 현재 화면에 보이는 모든 영역은 #popup 입니다. 그러니 아무곳이나 클릭해도 #popup 내부에 속하기 때문입니다. 이런 내용을 참고하시어 멋진 팝업창을 만들어 보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
