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

 

오래전, 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를 누르면 아무 문제가 없지만 다른 브라우저들에서는 모달까지 같이 닫히게 되는 이슈를 발견했다.

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

 

 

결과 화면 

See the Pen Untitled by maru-dev4905 (@maru-dev4905) on CodePen.