मोडल

मॉडल का इस्तेमाल, बैनर सूचनाओं के विकल्प के तौर पर किया जा सकता है. मोडल, मौजूदा पेज के कॉन्टेंट के सबसे ऊपर दिखते हैं, इसलिए उनके दिखने पर लेआउट शिफ़्ट नहीं होता. कॉन्टेंट के हिसाब से, इस मोडल का साइज़ बड़ा हो जाता है.

एचटीएमएल

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