معین

مدال ها را می توان به عنوان جایگزینی برای آگهی های بنر استفاده کرد. از آنجایی که مدال‌ها در بالای محتوای صفحه موجود نمایش داده می‌شوند، وقتی نمایش داده می‌شوند باعث تغییر طرح‌بندی نمی‌شوند. اندازه این مودال متناسب با محتوای آن است.

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";
}