HTML | DOM 对话框 close() 方法(1)

📌 相关文章

📜 HTML | DOM 对话框 close() 方法(1)

📅 最后修改于: 2023-12-03 15:01:12.471000 🧑 作者: Mango

HTML | DOM 对话框 close() 方法

简介

close() 方法是 HTML DOM 对话框对象的一种方法，用于关闭对话框。

语法

dialog.close();

参数

close() 方法不接受任何参数。

返回值

close() 方法没有返回值。

示例代码

<!DOCTYPE html>
<html>
<body>

<button onclick="openDialog()">打开对话框</button>

<dialog id="myDialog">
   <p>这是一个对话框</p>
   <button onclick="closeDialog()">关闭对话框</button>
</dialog>

<script>
function openDialog() {
  document.getElementById("myDialog").showModal();
}

function closeDialog() {
  document.getElementById("myDialog").close();
}
</script>

</body>
</html>

在上述代码中，我们创建了一个对话框，并使用 showMode() 方法打开对话框。当用户点击“关闭对话框”按钮时，调用 closeDialog() 方法，使用 close() 方法关闭对话框。

注意事项

close() 方法只能用于对话框对象。
当对话框关闭时，将触发对话框的 cancel 事件，可以使用 oncancel 事件监听该事件。
close() 方法不会销毁对话框，只是将其从屏幕上移除，再次打开对话框时，将恢复到之前的状态。如果需要销毁对话框，可以使用 remove() 方法。