CSS: modal ​

.instui-modal — ダイアログの表面（ネイティブの <dialog> でも動作）；ヘッダー／本文／フッターのパーツ。

個々のパーツについては modal.header、modal.body、および modal.footer メンバーを参照。

Source: body.css

TIP

JS 拡張 — このコンポーネントの CSS は単独でレンダリングおよび動作します。対話的な振る舞いを追加するには @pantoken/interactions と組み合わせてください。詳細は下の修飾子表を参照してください。

アクセシビリティ ​

モーダル意味論と Esc で閉じる挙動のためにネイティブの <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 — トレイは同じ取り消し可能なオーバーレイパターンで、画面の端にアンカーされる。