<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生的弹出窗口dialog</title>
<style>
#myDialog {
border-radius: 10px;
background-color: #ccc;
}
#myDialog::backdrop {
background-color: #8008;
backdrop-filter: blur(2px);
}
</style>
</head>
<body>
<!-- <button onclick="document.getElementById('myDialog').showModal()">弹窗</button> -->
<button onclick="myDialog.show()">弹窗</button>
<button onclick="myDialog.showModal()">弹窗</button>
<dialog id="myDialog">
<div>
<p>这是一个弹窗</p>
<p><input type="text"></p>
<p><input type="text"></p>
<button onclick="myDialog.close()">关闭</button>
</div>
</dialog>
</body>
</html>
