Bagian modal dapat digunakan sebagai alternatif untuk pemberitahuan banner. Karena modal ditampilkan di atas konten halaman yang ada, modal tidak menyebabkan pergeseran tata letak saat ditampilkan. Modal ini membesar agar sesuai dengan isinya.
HTML
<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>CSS
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;
}
JS
document.getElementById("close-button").onclick = () => {
document.getElementById("modal").style.display = "none";
}