เครื่องมือสร้างโมดัล CSS

CSS ที่สร้างขึ้นครอบคลุมอะไรบ้าง

โค้ดจัดสไตล์ห้าคลาส:

• .modal-backdrop: ชั้นคงที่เต็มจอ พื้นหลังเข้มกึ่งโปร่งใส (rgba(17, 24, 39, .62)) กริดตรงกลาง และพื้นที่ว่าง 24 px รอบแผง
• .modal-panel: การ์ดสีขาวกว้าง min(100%, Npx) ตามรัศมีมุมที่คุณเลือก เงาอ่อน และมุมที่ตัดทิ้ง
• .modal-header: แถบเน้นหนา 4 px ในสีที่คุณเลือก ถัดลงมาคือพื้นที่ชื่อเรื่องที่มีแพดดิง 20 px 24 px
• .modal-body: พื้นที่เนื้อหา แพดดิง 18 px 24 px
• .modal-actions: แถวปุ่มชิดขวา ห่างกัน 10 px

โครงสร้าง HTML ที่สอดคล้องกัน

CSS คาดหวังมาร์กอัปดังนี้:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>ยืนยัน</h2>
    </div>
    <div class="modal-body">
      <p>คุณแน่ใจหรือว่าต้องการดำเนินการต่อ?</p>
    </div>
    <div class="modal-actions">
      <button>ยกเลิก</button>
      <button>ดำเนินการต่อ</button>
    </div>
  </div>
</div>

วางแผงไว้ภายในพื้นหลัง: พื้นหลังเป็นชั้นคงที่ และแผงจะอยู่ตรงกลางของมัน หากต้องการเปิดและปิดโมดัล ให้เพิ่มและนำพื้นหลังออกจากโค้ดแอปพลิเคชันของคุณ หรือสลับการแสดงผลของมัน

การปรับให้เข้ากับหน้าจอเล็ก

ความกว้างของแผงถูกจำกัดด้วย min(100%, Npx) ดังนั้นค่าที่ตั้งไว้ 520 px บนโทรศัพท์แคบจะกลายเป็นความกว้างเต็มของวิวพอร์ตลบพื้นที่ว่าง 24 px ของพื้นหลัง แถวปุ่มการทำงานยังคงชิดขวา และเนื้อหายาวจะเลื่อนไปพร้อมกับหน้า ไม่ต้องใช้ media query สำหรับกรณีทั่วไป

หมายเหตุและข้อจำกัด

เครื่องมือนี้สร้าง CSS อย่างเดียว ไม่รวม JavaScript สำหรับเปิดหรือปิดโมดัล กักโฟกัสคีย์บอร์ด หรือจัดการปุ่ม ESC คุณต้องเพิ่มตรรกะนั้นในแอปพลิเคชันของคุณเอง

ส่วนหัวจะคงแถบเน้นหนา 4 px ไว้เสมอ หากไม่ต้องการก็ลบหรือเปลี่ยนสีของกฎนั้นในโค้ดที่คัดลอกมา