CSS: modal ​

.instui-modal — एक डायलॉग सतह (नेटिव <dialog> पर काम करता है); header/body/footer हिस्से।

व्यक्तिगत हिस्सों के लिए modal.header, modal.body, और modal.footer सदस्यों को देखें।

Source: body.css

TIP

JS संवर्धन — यह कंपोनेंट का CSS स्वयं रेंडर और कार्य करता है; इंटरैक्टिव व्यवहार जोड़ने के लिए इसे @pantoken/interactions के साथ जोड़ें। विवरण के लिए modifier table below देखें।

एक्सेसिबिलिटी ​

मोडल अर्थव्यवस्था और Esc-to-close के लिए नेटिव <dialog> को showModal() के साथ खोलें, और इसे 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ऑन-डार्क क्रोम (मीडिया बॉडी के साथ जोड़ी बनाता है)। @affects modal.header @affects modal.body @affects modal.footer — प्रत्येक हिस्से को ऑन-डार्क लुक के लिए री-रंग करता है।
.-density-compactहिस्सों की पैडिंग तंग करें। @affects modal.header @affects modal.body @affects modal.footer — प्रत्येक हिस्से की पैडिंग को तंग करता है।
.-overflow-fitव्यूपोर्ट तक सीमित करें और बॉडी को स्क्रॉल करें। @affects modal.body — जब मोडल व्यूपोर्ट तक सीमित हो तो बॉडी को स्क्रॉल करता है।
.-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

ब्राउज़र समर्थन ​

  • नेटिव <dialog> और उसके ::backdrop को स्टाइल करता है; टॉप-लेयर रेंडरिंग और बैकड्रॉप स्टाइलिंग के लिए ब्राउज़र में dialog एलिमेंट का समर्थन होना चाहिए।

सबकम्पोनेन्ट्स ​

संबंधित ​

  • tray — ट्रे वही डिस्मिसेबल ओवरले पैटर्न है, जो स्क्रीन के किनारे पर एंकर किया जाता है।