מודאלי

אפשר להשתמש בסמלים כחלופה להודעות באנר. מאחר שחלונות עזר מוצגים מעל תוכן קיים בדף, הם לא גורמים לשינויי הפריסה בזמן שהם מוצגים. חלון העזר הזה גדל כדי להתאים לתוכן שלו.

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