js dialog实现

使用 <dialog> 元素实现对话框

HTML5 提供了原生 <dialog> 元素，支持模态和非模态对话框。现代浏览器（Chrome、Edge、Firefox 等）均支持该特性。

<dialog id="myDialog">
  <p>这是一个原生对话框</p>
  <button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">打开模态对话框</button>
<button onclick="document.getElementById('myDialog').show()">打开非模态对话框</button>

关键方法：

• showModal()：打开模态对话框（会阻止其他页面交互）
• show()：打开非模态对话框
• close()：关闭对话框

使用 CSS 自定义对话框样式

通过 ::backdrop 伪元素可以自定义模态对话框的背景样式：

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

dialog {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

通过 JavaScript 控制对话框

更复杂的交互可以通过 JavaScript 实现：

const dialog = document.querySelector('dialog');
const openBtn = document.getElementById('openDialog');
const closeBtn = dialog.querySelector('.close');

openBtn.addEventListener('click', () => {
  dialog.showModal();
});

closeBtn.addEventListener('click', () => {
  dialog.close();
});

// 监听对话框关闭事件
dialog.addEventListener('close', () => {
  console.log('对话框已关闭');
});

表单与对话框集成

<dialog> 元素可以与表单结合使用：

<dialog id="formDialog">
  <form method="dialog">
    <label>
      用户名：
      <input type="text" name="username">
    </label>
    <button type="submit">确认</button>
    <button type="button" onclick="this.closest('dialog').close()">取消</button>
  </form>
</dialog>

当表单提交时，对话框会自动关闭，且可以通过 dialog.returnValue 获取返回值。

兼容性处理

对于不支持 <dialog> 的浏览器，可以使用 Polyfill 或替代方案：

<script src="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.css">

<script>
  // 应用 Polyfill
  const dialog = document.querySelector('dialog');
  dialogPolyfill.registerDialog(dialog);
</script>

替代方案：自定义对话框组件

如果需要更复杂的功能，可以创建自定义对话框组件：

class MyDialog {
  constructor(selector) {
    this.dialog = document.querySelector(selector);
    this.init();
  }

  init() {
    this.dialog.style.display = 'none';
    this.dialog.style.position = 'fixed';
    // 其他样式初始化...
  }

  open() {
    this.dialog.style.display = 'block';
    document.body.style.overflow = 'hidden';
  }

  close() {
    this.dialog.style.display = 'none';
    document.body.style.overflow = '';
  }
}

// 使用示例
const myDialog = new MyDialog('#customDialog');

动画效果

为对话框添加动画效果可以提升用户体验：

dialog {
  animation: fadeIn 0.3s ease-out;
}

dialog[open] {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}