<dialog id="myDialog">
  <p>Hello, world!</p>
  <button id="closeDialog">Close</button>
</dialog>

<button id="openDialog">Open dialog</button>

<script>
// 获取对话框元素
var dialog = document.getElementById("myDialog");

// 获取打开对话框的按钮元素
var openDialogBtn = document.getElementById("openDialog");

// 获取关闭对话框的按钮元素
var closeDialogBtn = document.getElementById("closeDialog");

// 打开对话框
openDialogBtn.addEventListener("click", function() {
  dialog.showModal();
});

// 关闭对话框
closeDialogBtn.addEventListener("click", function() {
  dialog.close();
});
</script>

属性

• open：表示对话框是否打开，可以设置为布尔值 true 或 false。

方法

• show()：打开对话框。
• showModal()：打开模态对话框。
• close()：关闭对话框。

样式