html原生弹窗

作者：YXN-html 阅读量：42 发布日期：2022-06-27

我们只需将元素放入 dialog 标签即可，设置 open 即显示，默认隐藏去掉 open 即可，

通过按钮触发显示：myDialog.show()
模态框形式显示：myDialog.showModal()
关闭：myDialog.close()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生弹窗</title>
</head>
<body>
<button onclick="myDialog.show()">显示弹窗</button>
<button onclick="myDialog.showModal()">显示模态框弹窗</button>
<dialog id="myDialog" open>
    <div>
        <h3>这是一个弹窗</h3>
        <p>账号：<input type="text"></p>
        <p>密码：<input type="password"></p>
        <button onclick="myDialog.close()">关闭弹窗</button>
    </div>
</dialog>
</body>
</html>

YXN-html

2022-06-27