CSS: modal

.instui-modal — 對話視窗表面（支援原生 <dialog>）；包含 header/body/footer 部分。

請參閱 modal.header、modal.body 與 modal.footer 成員以了解各個部分。

Source: body.css

TIP

JS 加強 — 此元件的 CSS 可獨立呈現並運作；與 @pantoken/interactions 配對可新增互動行為。請參閱下方的 修飾子表格。

無障礙

使用 showModal() 開啟原生 <dialog> 以取得模態語意與 Esc 關閉行為，並以指向 .header 的 aria-labelledby 為其命名。

使用方法

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

示範

範例

<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>

結構

.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-topmost	none | <shadow>#	—
--instui-spacing-space-xl	<length>	1.5rem

瀏覽器支援

• 為原生 <dialog> 及其 ::backdrop 套用樣式；頂層呈現與背景樣式需瀏覽器支援 dialog 元素。

子元件

• modal.body
• modal.footer
• modal.header

相關

• tray — tray 是相同的可關閉覆蓋元件模式，但錨定於畫面邊緣。