모달

모달은 배너 알림 대신 사용할 수 있습니다. 모달은 기존 페이지 콘텐츠 위에 표시되므로 모달을 표시할 때 레이아웃 변경이 발생하지 않습니다. 이 모달은 콘텐츠에 맞게 크기가 커집니다.

<div id="modal" class="modal">
   
<button id="close-button" class="close-button" aria-label="close" tabindex="0"></button>
   
<div>
       
<h1>Notice</h1>
        Lorem ipsum dolor sit amet.
   
</div>
</div>

        body
{
   
overscroll-behavior-y: none;
   
font-family: system-ui;
   
padding: 2em;
   
background-color: #f4f4f4;
}
.modal {
   
position: fixed;
   
top: 50%;
   
left: 50%;
   
min-width: 66%;
   
transform: translate(-50%, -50%);
   
padding: 1em 2em 2em 2em;
   
background-color: white;
   
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.close-button {
   
background: transparent;
   
border: none;
   
padding: 1em;
   
font-size: 1em;
   
position: absolute;
   
right: 0;
   
top: 0;
   
cursor: pointer;
}
       

        document
.getElementById("close-button").onclick = () => {
    document
.getElementById("modal").style.display = "none";
}