Cửa sổ phụ

Bạn có thể sử dụng các mô-đun thay cho thông báo dạng biểu ngữ. Vì các phương thức hiển thị trên nội dung trang hiện có, nên chúng không làm thay đổi bố cục khi hiển thị. Phương thức này tăng kích thước để vừa với nội dung của nó.

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