Modal 對話框

置中對話框，蓋在 40% 黑色遮罩上。開啟時焦點留在面板內。

遮罩 z-index 3990，面板 4000。第二層各 +10。Esc 與遮罩點擊只作用於最上層；關閉後焦點回到前一層面板。

範例

基本

open 為受控屬性。關閉時送出 update:open（detail: false）與 close。

開啟對話框

尚未儲存的編輯會寫入工作區，稍後可以還原。

取消儲存

<gk-button @click="basic = true">開啟對話框</gk-button>
<gk-modal :open="basic" title="儲存變更？" @update:open="basic = $event.detail">
  <p>尚未儲存的編輯會寫入工作區。</p>
</gk-modal>

寬度預設

sm 400 / md 520 / lg 720。數字視為像素。≤640px 時左右各留 16px，max-height: 85vh。

sm · 400md · 520lg · 720

目前寬度：md

<gk-modal :open="open" :width="width" title="寬度">...</gk-modal>

確認對話框

preset="dialog" 會畫取消與確認。確認送出 confirm，不會自己關閉。

確認

主要動作會送出 confirm。

<gk-modal preset="dialog" title="發佈？" :open="open" @confirm="open = false"></gk-modal>

危險確認

confirm-variant="danger" 把對話框主按鈕畫成危險色。它仍是平坦的頁尾按鈕，與核准示意相同，不是帶位移陰影的 gk-button。

刪除

「攤位簡介」將永久刪除，無法復原。

<gk-modal preset="dialog" title="刪除專案？" width="sm" confirm-variant="danger" confirm-text="刪除" cancel-text="取消" :open="open" @confirm="open = false"></gk-modal>

表單內容

preset="card" 是留白較多的內容殼。欄位放在預設 slot。

編輯資料

取消儲存

<gk-modal preset="card" title="編輯資料" :open="open"><gk-input placeholder="名稱"></gk-input></gk-modal>

載入中確認

loading 會在對話框主按鈕顯示旋轉圖示，並忽略確認點擊。

發佈

正在上傳資產…

<gk-modal preset="dialog" :loading="loading" title="發佈中" @confirm="confirmSave"></gk-modal>

不可關閉

closable="false" 會藏起關閉鈕，也不回應 Esc。

開啟鎖定

完成此步驟才能繼續。

繼續

<gk-modal :closable="false" title="必須完成" :open="open"></gk-modal>

遮罩不可關閉

mask-closable="false" 保留遮罩，但點遮罩不會關。仍可按 Esc 或關閉鈕（若 closable）。

開啟

點暗色遮罩不會關閉。

<gk-modal :mask-closable="false" title="遮罩不關閉" :open="open"></gk-modal>

巢狀對話框

允許第二層。遮罩 4000、面板 4010。只有最上層接收 Esc 與遮罩點擊，關閉後焦點回到前一層面板。

開啟第一層

這一層會留在下面。

再開一層

Esc 只會關閉這一層。

<gk-modal :open="outer" title="第一層"></gk-modal>
<gk-modal :open="inner" title="第二層"></gk-modal>

Alpine

<div x-data="{ open: false }">
  <gk-button type="button" x-on:click="open = true">開啟</gk-button>
  <gk-modal title="你好" x-bind:open="open" x-on:update:open="open = $event.detail">
    <p>Alpine 可以驅動同一個元素。</p>
  </gk-modal>
</div>

屬性字串 "false" 會視為關閉，因此 Alpine 的屬性綁定可用。

API

屬性

屬性	型別	預設
open	boolean	false
title	string	''
closable	boolean	true
mask-closable	boolean	true
preset	'dialog' | 'card' | ''	''
width	number | 'sm' | 'md' | 'lg'	'md'（520px）
loading	boolean	false
confirm-variant	'primary' | 'danger'	'primary'
confirm-text	string	'Confirm'
cancel-text	string	'Cancel'

confirm-text／cancel-text 是內建對話框頁尾的文字。放入 footer slot 會取代那組按鈕。

Slots

名稱	說明
default	內容
header	標題旁的額外標頭
footer	動作。有內容時取代 dialog 預設按鈕

事件

名稱	內容
update:open	關閉時為 false
close	被關閉（Esc、遮罩、關閉鈕、取消）
confirm	對話框主要動作，不會自動關閉

CSS parts

mask、panel、header、title、close、body、footer，以及 dialog 預設按鈕的 cancel／confirm／spinner。

進出場為 180ms 透明度加 10px 位移。面板以 position: fixed 留在元件 Shadow 內，因此 ::part 可用，不像 Select／Date Picker 那樣 portal 到 document.body。

堆疊

層級	遮罩	面板
0	3990	4000
1	4000	4010

抽屜與此共用阻擋堆疊，後開啟的對話框會蓋在抽屜之上。