Docs99

Appearance

Return to top
On this page

dialog 對話視窗

說明

<dialog> 元素，可以用來顯示 對話視窗 或其它信息的呈現，也可以為文件內容更 語意 化；這個元素本身是帶有 position: absolute; 屬性。

html
<dialog open> ... </dialog>

屬性

open

表示 <dialog> 開啟狀態。

提醒

如果，一開始未設置 open 屬性，不應該用 open 屬性的設置來改變 <dialog> 的狀態，而是使用 事件 API 來改變狀態。

注意

默認的情況下 esc 是不會 「關閉」 <dialog>。

事件

  • .show() 開啟「對話視窗」區塊

    這個方法，無法為 <dialog> 添加背景。

  • .showModal() 開啟「對話視窗」整體 (建議)

    可以使用 dialog::backdrop 選取器，為「對話視窗」客製底背景。

  • .close() 關閉「對話視窗」

Demo

This is Dialog!

This is DialogThis is DialogThis is DialogThis is DialogThis is Dialog is DialogThis is Dialog is DialogThis is Dialog

Code

元素設置

html
<button class="dialog-btn">
  Show Dialog
</button>

<dialog>
  <div>
    <h4>This is Dialog!</h4>
    <p>
      This is DialogThis is DialogThis is DialogThis  is DialogThis is Dialog is DialogThis is Dialog is DialogThis is Dialog
    </p>
  </div>
  <div>
    <button id="dialog-cancel-btn">Cancel</button>
  </div>
</dialog>

客製化 dialog 底層背景

css
dialog::backdrop {
  background: rgb(0,0,0,.7);
}

事件

js
const dialogBtn = document.querySelector('.dialog-btn')
const dialogCancelBtn = document.querySelector('#dialog-cancel-btn')
const dialogEl = document.querySelector('dialog')

// 關閉事件
const dialogClose = () => {
  dialogEl.close()
}

// 開啟事件
const dialogShow = () => {
  dialogEl.showModal()
}

dialogCancelBtn.addEventListener('click', () => dialogClose())

dialogBtn.addEventListener('click', () => {
  if('open' in dialogEl.attributes) {
    return dialogClose()
  }
  dialogShow()
})
Codepen

👉 Codepen

Reference