HTML5dialog使用技巧与隐藏方法

<dialog id="myModal">
  <h3>提示信息</h3>
  <p>这是一条模态框消息。</p>
  <button id="closeBtn">关闭</button>
</dialog>
<button id="openBtn">打开模态框</button>

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;
}