每日Html 4.24

PythonPioneer2025-04-25 8:34

📚 每日一个Html小知识 🐍

每天花1分钟，解锁一个Html实用技巧/冷知识！无论是新手还是老手，这里都有让你眼前一亮的编程干货。

✨ 今日主题：<dialog> 标签

💡 你知道吗？ 浏览器现在原生支持模态弹窗了！

热气腾腾的代码示例来咯~

html 复制代码

<dialog id="myDialog">
  <h2>系统提示</h2>
  <p>确定要删除这条数据吗？</p>
  <button onclick="dialog.close()">取消</button>
  <button onclick="deleteItem()">确定</button>
</dialog>

<script>
  const dialog = document.getElementById('myDialog');
  // 显示弹窗
  dialog.showModal();
  // 点击外部自动关闭（需polyfill）
  dialog.addEventListener('click', (e) => {
    if (e.target === dialog) dialog.close();
  });
</script>

优势：

✅ 无需JS框架

✅ 内置焦点管理

✅ 支持::backdrop伪元素美化

适用场景：表单确认、通知提示

你学会了吗？