modal

modal

modal은 로그인이나 알림 내용으로 표현되는 팝업창을 나타낸다

특별한 기술인 줄 알았는데 알고보니 그냥 3d 인덱스를 우선순위로 정해놓고 새로운 엘리먼트를 화면에 띄우는 것이었다..

html

<button class="btn">pop-up</button>

<div class="modal">
    <div class="modal-container">
        <span class="modal-close">&times;</span>
        <div class="modal-context">
            this is modal

        </div>
    </div>
</div>

×은 html엔티티로 x를 나타낸다

css

이 포스팅의 카테고리를 css로 할까 js로 할까 고민했는데 js는 기초적인 이벤트만 들어가고 css분량이 더 커서 css로 했다

.modal{
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.1);
}

.modal-container{
    background-color: #fefefe;
    border: 1px solid #888;
    width: 50%;
    height: 100px;
}
.modal-context{
    padding: 20px;
}

.modal-close{
    float: right;
    padding: 3px 5px 0 0;
}
.modal-close:hover{
    font-weight: bold;
    cursor: pointer;
}

이 상태로 돌리면 팝업창이 열린 상태로 페이지가 열린다

중요한 부분만 언급해보면

modal의

    background-color: rgba(0,0,0,0.1);

팝업 외부의 배경을 투명하게 해 팝업 효과를 주고

modal container

    background-color: #fefefe;

로 팝업창 내부는 대비되는 색으로 처리해서 띄워진 효과를 낸다

x 클로즈 버튼도 마우스가 올라가면 커서가 바뀌고 굵게 처리한 모습

이제 자바스크립트를 얹어서 상호작용하는 팝업창을 만들어보자

javascript

.modal{
    ...
    display:none;
    ...
}

우선 사용자의 입력이 들어오기 전에는 팝업창이 안보이도록 css에서 처리를 해둔다

const btnElem = document.querySelector('.btn');
const modalElem = document.querySelector('.modal');
const closeElem = document.querySelector('.modal-close');

btnElem.addEventListener('click',()=>{
    modalElem.style.display = 'flex';
});
closeElem.addEventListener('click',()=>{
    modalElem.style.display = 'none';
});

버튼을 누르면 modal이 뜨게, x를 클릭하면 modal을 제거하게 자바스크립트를 추가한 모습