Dialog

dialog元素表示一个对话框或者交互式窗口组件

example

javascript 方法

事件

dialog.addEventListener('close', handle)
dialog.addEventListener('cancel', handle)

自定义样式

可以通过自定义dialog以及dialog::backdrop的样式来修改其默认样式,设置可以为其添加动画效果

样式对比

使用

<dialog class="nui-dialog nui-dialog--animated">
  <header class="nui-dialog__head">
    <h3 class="nui-dialog__title">Dialog</h3>
    <button type="button" class="nui-dialog__close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </header>
  <div class="nui-dialog__body">
    ...
    content
    ...
  </div>
  <footer class="nui-dialog__foot">
    <button class="nui-dialog__btn" data-dismiss="modal" aria-label="Close">Cancel</button>
    <button class="nui-dialog__btn btn-confirm">Confirm</button>
  </footer>
</dialog>

polyfill

dialog-polyfill