블로그
Pomon P.
popomonclub@gmail.com
모달 팝업을 만드는 일을 어렵다고 생각하시는 분들이 많은데요. 알고나면 정말 쉽습니다. 이번 포스팅에서는 모달팝업을 만들기 위해 필요한 기본적인 요소에 대해서 설명해보겠습니다.
모달은 첫번째로 화면 전체를 어둡게 만들어주는 배경(background)과 모달 팝업을 감싸주는 창(window) 마지막으로 모달 팝업의 내용을 나타내는 팝업(popup) 으로 구성됩니다. 배경과 창을 나타내는 HTML 코드는 다음과 같습니다.
<div class="background">
<div class="window">
<div class="popup"><div>
<div>
<div>이어서 배경을 위한 CSS 코드를 작성해 보겠습니다. position fixed 속성을 사용하여 스크롤이 발생하더라도 화면에 고정되도록 하였고, width, height 를 이용하여 화면을 가득 차게 만들었습니다. 또한 배경의 어두운 정도는 0.3 으로 하였으나 이 부분은 원하시는 만큼 진하게 또는 연하게 하시면 될 것 같습니다. 마지막으로 z-index 를 이용해서 화면의 맨 앞으로 모달을 배치했습니다.
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
이어서 창을 위한 CSS 코드를 작성해 보겠습니다. 창은 배경안에 팝업이 들어갈 공간을 지정해주기 위한 부분입니다. 따라서 다음과 같이 배경에 가득 차도록 width, height 를 조절해 주시면 됩니다. 또한, 팝업이 들어갈 공간을 제한해주어얗 하기 때문에 position: relative; 속성을 추가하였습니다.
.window {
position: relative;
width: 100%;
height: 100%;
}
이제 마지막으로 대망의 ... 팝업 스타일 코드입니다! 우선 position, top, left, transform 속성을 이용해서 창의 정 가운데에 배치한 다음, 배경색을 흰색으로 지정하고 그림자를 조금 주었습니다. 현재는 내용이 없기 때문에 width, height 를 임시로 지정해서 500px로 입력을 해 두었지만, 원래 사용할 때에는 화면의 세로길이를 넘어가는 경우에만 height를 지정하여 스크롤을 넣어두고, 그렇지 않은 경우에는 둘다 지정하지 않습니다. 내용을 넣으면 알아서 예쁘게 화면이 늘어나기 때문입니다.
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
/* 임시 지정 */
width: 500px;
height: 500px;
}
자 이제 이 모달팝업에 핵심이라고 볼 수 있는 닫기(close) 기능과 열기(show) 기능을 넣어보려고 합니다. 기존 CSS에 코드를 살짝 덧붙일 예정이니 너무 부담가지지 않으셔도 될 것 같습니다.
먼저 모달이 나타날때에는 천천히 나타나는 효과를 주면 훨씬 예쁘겠죠? 그러기 위해서는 기존 코드에 아래와 같이 숨기기를 위한 코드를 추가해 주어야 합니다. 원래는 z-index: 1000 을 지워야 하는게 맞지만, 이해를 돕기 위해 기존 코드와 변경사항을 알아줬으면 해서 이렇게 작성을 하였습니다.
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
/* 숨기기 */
z-index: -1;
opacity: 0;
}그 다음 나타날때 적용할 스타일을 별도의 클래스로 만들어 줍니다. opacity와 z-index를 사용하여 투명도와 위치가 원래대로 나타나도록 하고, 그 시간은 0.5초를 지정해 주었습니다.
.show {
opacity: 1;
z-index: 1000;
transition: all .5s;
}
이어서 하얀색 팝업(popup)을 아래에서 위로 살짝 올라오는 느낌을 적용해 보겠습니다. 기존에 y를 -50% 에 배치를 했었는데 이번에는 조금 더 아래인 -40%를 초기 위치로 설정하였습니다.
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
/* 임시 지정 */
width: 500px;
height: 500px;
/* 초기에 약간 아래에 배치 */
transform: translate(-50%, -40%);
}
그 다음 나타났을 때에 -50% 위치로 되돌아가도록 다음과 같이 작성하면 아래에서 위로 올라오는 느낌을 줄 수 있습니다.
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
/* 임시 지정 */
width: 500px;
height: 500px;
/* 초기에 약간 아래에 배치 */
transform: translate(-50%, -40%);
}
.show .popup {
transform: translate(-50%, -50%);
transition: all .5s;
}
이제 자바스크립트 이벤트를 통해서 팝업을 띄우고, 종료하는 함수를 만들어 보겠습니다. 먼저 팝업을 띄우는 방법입니다. 위에서 CSS 코드를 다 작성을 해 두었기 때문에, <div class="background"></div> 코드를 <div class="background show"></div> 코드로만 변경해 주면 팝업이 뜨게 됩니다.
그래서 다음과 같이 매우 쉬운 코드로 팝업을 띄울 수 있게 됩니다.
function show () {
document.querySelector(".background").className = "background show";
}
그렇다면 팝업을 끄는건 어떻게 해야 할까요? background show 를 background 로 다시 되돌려주면 됩니다. 쉽죠?
function close () {
document.querySelector(".background").className = "background";
}
이제 아래의 완성된 코드를 참조하셔서 원하는 느낌의 모달 팝업을 쉽게 만드실 수 있으면 좋겠습니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
/* 숨기기 */
z-index: -1;
opacity: 0;
}
.show {
opacity: 1;
z-index: 1000;
transition: all 0.5s;
}
.window {
position: relative;
width: 100%;
height: 100%;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
/* 임시 지정 */
width: 100px;
height: 100px;
/* 초기에 약간 아래에 배치 */
transform: translate(-50%, -40%);
}
.show .popup {
transform: translate(-50%, -50%);
transition: all 0.5s;
}
</style>
</head>
<body>
<button id="show">팝업열기</button>
<div class="background">
<div class="window">
<div class="popup">
<button id="close">팝업닫기</button>
</div>
<div>
<div></div>
</div>
</div>
</div>
<script>
function show() {
document.querySelector(".background").className = "background show";
}
function close() {
document.querySelector(".background").className = "background";
}
document.querySelector("#show").addEventListener("click", show);
document.querySelector("#close").addEventListener("click", close);
</script>
</body>
</html>
See the Pen Tistory - Modal by HongJiseong (@as-you-say) on CodePen.
| [Frontend/HTML] 테이블(table) 태그와 데이터 사용하기 (0) | 2021.02.04 |
|---|---|
| [Frontend/HTML] 드롭다운(Select) 만들기 (0) | 2021.01.25 |
| [Frontend/HTML] Block을 대체하는 Flex 박스 (0) | 2020.12.28 |