HTML5dialog使用技巧与隐藏方法

  
提示信息
  
这是一条模态框消息。
  关闭

打开模态框

const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openBtn');

openBtn.addEventListener('click', () => {
  modal.showModal(); // 显示模态框
});

const closeBtn = document.getElementById('closeBtn');

closeBtn.addEventListener('click', () => {
  modal.close(); // 关闭模态框
});

dialog {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  width: 300px;
  padding: 20px;
}