Modales Design

Modale Elemente können als Alternative zu Bannerhinweisen verwendet werden. Da Modales über dem vorhandenen Seiteninhalt angezeigt werden, verursachen sie bei der Anzeige keine Layoutverschiebungen. Die Größe dieses Modaldialogfelds wird an den Inhalt angepasst.

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