Trình tạo Modal CSS

CSS được tạo bao gồm những gì

Mã này tạo kiểu cho năm class:

• .modal-backdrop: lớp cố định toàn màn hình, nền tối bán trong suốt (rgba(17, 24, 39, .62)), lưới căn giữa và khoảng cách 24 px quanh bảng điều khiển.
• .modal-panel: thẻ trắng rộng min(100%, Npx), bán kính bo góc của bạn, đổ bóng mềm và các góc bị cắt.
• .modal-header: thanh nhấn dày 4 px đúng màu bạn chọn, bên dưới là vùng tiêu đề với đệm 20 px 24 px.
• .modal-body: vùng nội dung, đệm 18 px 24 px.
• .modal-actions: hàng nút căn phải, cách nhau 10 px.

Cấu trúc HTML tương ứng

CSS cần markup sau:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Xác nhận</h2>
    </div>
    <div class="modal-body">
      <p>Bạn có chắc muốn tiếp tục?</p>
    </div>
    <div class="modal-actions">
      <button>Hủy</button>
      <button>Tiếp tục</button>
    </div>
  </div>
</div>

Giữ bảng điều khiển bên trong lớp nền: lớp nền là lớp cố định và bảng được căn giữa trong đó. Để mở và đóng modal, hãy thêm và gỡ lớp nền từ mã ứng dụng của bạn, hoặc chuyển đổi chế độ hiển thị của nó.

Thích ứng với màn hình nhỏ

Chiều rộng bảng được giới hạn bằng min(100%, Npx), nên cài đặt 520 px trên điện thoại hẹp sẽ thành toàn bộ chiều rộng cửa sổ, trừ đi 24 px đệm của lớp nền. Hàng thao tác vẫn căn phải và nội dung dài cuộn cùng trang. Không cần media query cho các trường hợp thông thường.

Lưu ý và giới hạn

Trình tạo chỉ tạo CSS. Nó không kèm JavaScript để mở hoặc đóng modal, khóa tiêu điểm bàn phím hay xử lý phím ESC. Bạn tự thêm logic đó vào ứng dụng của mình.

Tiêu đề luôn giữ thanh nhấn dày 4 px; nếu không cần, hãy bỏ hoặc đổi màu quy tắc đó trong mã đã sao chép.