ak-dialog 对话框

ak-dialog 基于原生 <dialog>：浏览器负责顶层渲染、焦点管理、Escape 关闭与背景层，Core 只提供结构样式。

SOURCE / HTML

html

<button class="ak-button ak-button--action" type="button" data-dialog-trigger>
  <span class="ak-button__label">打开行动简报</span>
</button>

<dialog class="ak-dialog" id="operation-briefing" aria-labelledby="operation-briefing-title">
  <header class="ak-dialog__header">
    <span class="ak-dialog__eyebrow">Rhodes Island / Operation</span>
    <h2 class="ak-dialog__title" id="operation-briefing-title">行动简报</h2>
  </header>
  <div class="ak-dialog__body">
    <p>目标区域已完成侦察。请确认编队状态，并在信号建立后开始部署。</p>
  </div>
  <form class="ak-dialog__footer" method="dialog">
    <button class="ak-button" value="cancel">关闭</button>
    <button class="ak-button ak-button--action" value="confirm">确认</button>
  </form>
</dialog>

<script>
const trigger = document.querySelector('[data-dialog-trigger]')
const dialog = document.querySelector('#operation-briefing')

trigger.addEventListener('click', () => dialog.showModal())
dialog.addEventListener('click', (event) => {
  if (event.target === dialog)
    dialog.close('cancel')
})
</script>

使用 showModal() 打开模态对话框；关闭操作可以使用 method="dialog" 的表单，因此确认与取消按钮不需要额外事件处理。

const dialog = document.querySelector('#operation-briefing')
dialog.showModal()

结构类包括 ak-dialog__header、ak-dialog__title、ak-dialog__body 与 ak-dialog__footer。标题应通过 aria-labelledby 与对话框关联。

通过 --ak-dialog-signal 和 --ak-dialog-info 调整边缘状态色与上方信息色。

ak-dialog 对话框 ​

ak-dialog 对话框