<dialog> 공통으로 사용 가능한 모달

이승열 2023. 6. 7. 23:53

오래전, 2014년에 dialog 요소가 등장했다. 이 HTML 요소는 모달, 다이얼로그와 팝업을 쉽게 생성하기 위해 만들어졌다. 2022년에 dialog 요소를 거의 사용할 수 있게 되었는데 써봐야지 써봐야지 하면서 안써봤는데 2023년 5월쯤에 한번 써봤더니 괜찮길래 대충 간단하게 복붙하려고 작성해봤다.

HTML 소스

    <div class="login_wrap">
        <button class="dialog_btn btn_common btn_black_fill" data-modal="loginModal">로그인</button>
        
        <dialog id="loginModal" class="modal_common">
            <div class="modal_head">
                <h2>로그인 하시겠습니까?</h2>
            </div>
            <div class="modal_body">
                <p>
                    로그인을 하시면 문의글을 남기실 수 있습니다. <br>
                    (로그인을 하지 않으셔도 문의 접수는 남기실 수 있습니다.)
                </p>
            </div>
            <div class="modal_foot">
                <button class="btn_common btn_black_fill dialog_btn" data-modal="successModal">확인</button>
                <button class="btn_common btn_black_fill close_modal dialog_btn" data-modal="loginModal">취소</button>
            </div>
        </dialog>
        <dialog id="successModal" class="modal_common">
            <div class="modal_head">로그인 페이지로 이동합니다.</div>
            <div class="modal_foot">
                <button class="btn_common btn_black_fill close_modal dialog_btn" data-modal="successModal">확인</button>
            </div>
        </dialog>
    </div>

CSS 소스

.login_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #7F7FD5; 
    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);  
    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); 
}
.dialog_btn{
}
.btn_common{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 30px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 4px;
    transition-property: color, background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}
.btn_black_fill{
    background-color: #111;
    color: #f2f2f2;
}
.btn_black_fill:hover{
    background-color: #f2f2f2;
    color: #111;
}
.modal_common{
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100% - 272px);
    max-width: 600px;
    padding: 60px 40px;
    border: none;
    border-radius: 20px;
    transform: translate(-50%, -50%);
}
.modal_common.show::backdrop{
    backdrop-filter: blur(2px);
}
.modal_head{
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}
.modal_body{
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.modal_foot{
    display: flex;
    justify-content: center;
    gap: 20px;
}

Javascript 소스

const modalBtns = $(".dialog_btn");
const modals = $(".modal_common");
        
modalBtns.on("click",function(){
	let name = $(this).data("modal");
    $(this).hasClass("close_modal") ? closeModal(name) : openModal(name);
});
        
const openModal = (name) =>{
	modals.hide();
    $(`#${name}`).show();
}
        
const closeModal = (name) =>{
	$(`#${name}`).hide();
}

자바스크립트 소스를 대충 설명하자면, 버튼에 id 값을 줘서 javascript에서 일일히 하나하나 이벤트 입혀주는 방법도 있겠지만 솔직히 귀찮으니 data-modal 만들어서 열려고 하는 모달 이름을 붙여준 후 버튼 클릭 시 모달 이름을 변수에 입힌 후모달을 여는 방식이다.

모달을 열 때는 다른 모달이 겹치면 보기도 안좋고 나중에 닫을 때 하나하나 일일히 닫아줘야 되는게 솔직히 귀찮으니 열 때 모달 전부 닫고 해당 이름이 붙은 모달을 열어주는 방식이다.

모달을 닫는건 하나하나 닫기 귀찮으니 .close_modal이라는 클래스가 있으면 해당 이름이 붙은 모달을 닫아주는걸로 소스를 작성했다.

jQuery를 사용했는데 이상하게 showModal(), closeModal() 은 안돼는 것 같고 순수 Javascript 로만 showModal(), closeModal() 을 사용 가능한 것 같다.

showModal()을 사용하게 되면 키보드로 ESC 누르면 모달이 자동으로 닫히게 된다. 그리고 네이버 웨일 브라우저에서는 모달안에 input[type="file"]을 만들어서 파일 탐색기를 열게 되었을 경우에 ESC를 누르면 아무 문제가 없지만 다른 브라우저들에서는 모달까지 같이 닫히게 되는 이슈를 발견했다.

(위에 말한 이슈는 나중에 적어야지..)

티스토리