HTML 弹窗的制作方法

一、使用

• open： 决定弹窗是否打开的布尔值。
• modal： 如果设置为 true，则弹窗将阻止页面上的其他操作。

要使用

立即学习“前端免费学习笔记（深入）”；

1. 创建一个
   元素，并添加内容。
2. 为
   添加一个 open 属性，默认为 false。
3. 使用 JavaScript 控制 open 属性，在需要时打开或关闭弹窗。

示例代码：

<dialog id="myDialog"><h1>My Dialog</h1>  <p>This is a dialog.</p>  <button type="button" onclick="closeDialog()">Close</button></dialog><ｓｃｒｉｐｔ>function openDialog() {  document.getElementById("myDialog").open = true;}function closeDialog() {  document.getElementById("myDialog").open = false;}</ｓｃｒｉｐｔ>

二、使用 JavaScript

还可以使用 JavaScript 直接创建弹窗：

1. 创建一个弹出窗口对象：const myDialog = new Dialog();
2. 设置窗口内容：myDialog.content = "My Dialog";
3. 设置窗口属性，如大小、位置：myDialog.show()

示例代码：

const myDialog = new Dialog();myDialog.content = "My Dialog";myDialog.width = 300;myDialog.height = 200;myDialog.x = 100;myDialog.y = 100;myDialog.show();