CSS: modal ​

.instui-modal — พื้นผิวของไดอะล็อก (ทำงานกับ native <dialog>) ส่วนหัว/เนื้อหา/ส่วนท้าย

ดูสมาชิก modal.header, modal.body, และ modal.footer สำหรับแต่ละส่วน

Source: body.css

TIP

การปรับปรุง JS — CSS ของคอมโพเนนต์นี้เรนเดอร์และทำงานได้ด้วยตัวเอง; จับคู่กับ @pantoken/interactions เพื่อเพิ่มพฤติกรรมเชิงโต้ตอบ ดู ตารางตัวปรับแต่งด้านล่าง.

การเข้าถึง ​

เปิด native <dialog> ด้วย showModal() เพื่อให้มีความหมายแบบโมดอลและรองรับ Esc-to-close และตั้งชื่อด้วย aria-labelledby ชี้ไปยัง .header

การใช้งาน ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/modal.css";

สาธิต ​

ตัวอย่าง ​

html
<dialog class="instui-modal -size-sm" id="modal-sm">
  <div class="header"><strong>Small</strong></div>
  <div class="body"><code>-size-sm</code> — a narrow modal.</div>
  <div class="footer">
    <button class="instui-button">Close</button>
  </div>
</dialog>

โครงสร้าง ​

text
.instui-modal
  modal.header (component)
  modal.body (component)
  modal.footer (component)
flowchart TD n0[".instui-modal"]:::cssdoc-root n1(["modal.header"]):::cssdoc-component n2(["modal.body"]):::cssdoc-component n3(["modal.footer"]):::cssdoc-component n0 --> n1 n0 --> n2 n0 --> n3 click n1 "/api/css/modal.header.md" click n2 "/api/css/modal.body.md" click n3 "/api/css/modal.footer.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.-blurทำให้ฉากหลังด้านหลังโมดอลเบลอ
.-color-inverseโครมแบบ on-dark (ใช้คู่กับ media body). @affects modal.header @affects modal.body @affects modal.footer — เปลี่ยนสีแต่ละส่วนให้เป็นโทนสำหรับพื้นมืด
.-density-compactลดช่องว่างภายในส่วนให้แคบขึ้น @affects modal.header @affects modal.body @affects modal.footer — ลด padding ของแต่ละส่วน
.-overflow-fitจำกัดให้อยู่ใน viewport และเลื่อนเนื้อหา @affects modal.body — เลื่อนเนื้อหาเมื่อโมดอลถูกจำกัดขนาดให้พอดีกับ viewport
.-size-autoขนาดพอดีกับเนื้อหา
.-size-fullscreenชิดขอบเป็นขอบต่อขอบ
.-size-largeโมดอลขนาดกว้าง คำพ้องความหมายยาวของ -size-lg
.-size-lgโมดอลขนาดกว้าง
.-size-smโมดอลลักษณะคับแคบ
.-size-smallโมดอลลักษณะคับแคบ คำพ้องความหมายยาวของ -size-sm

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::backdropทำให้หน้าเบื้องหลังไดอะล็อกมืดลงเป็นมาสก์ และทำให้เกิดเอฟเฟกต์ฟรอสต์ใต้ -blur

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-component-mask-background-color<color>LightDarklight-dark(rgba(255,255,255,0.75), rgba(28,34,43,0.75))
--instui-component-modal-auto-min-width<length>16em
--instui-component-modal-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-modal-border-color<color>LightDarklight-dark(#E8EAEC, #334450)
--instui-component-modal-border-radius<length>1rem
--instui-component-modal-border-width<length>0.0625rem
--instui-component-modal-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-modal-inverse-background-color<color>LightDarklight-dark(#273540, #1C222B)
--instui-component-modal-inverse-border-color<color>#334450
--instui-component-modal-inverse-text-color<color>#ffffff
--instui-component-modal-large-max-width<length>62em
--instui-component-modal-medium-max-width<length>48em
--instui-component-modal-small-max-width<length>30em
--instui-component-modal-text-color<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-elevation-topmostnone | <shadow>#—
--instui-spacing-space-xl<length>1.5rem

รองรับเบราว์เซอร์ ​

  • จัดสไตล์ให้ native <dialog> และ ::backdrop; การเรนเดอร์ชั้นบนสุดและสไตล์ backdrop ต้องการเบราว์เซอร์ที่รองรับ element dialog

ส่วนประกอบย่อย ​

ที่เกี่ยวข้อง ​

  • tray — tray เป็นรูปแบบ overlay ที่ปิดได้เช่นเดียวกัน แต่ยึดติดกับขอบหน้าจอ