您现在的位置是:网站首页 > 博客日记 >

html原生弹窗

作者:YXN-html 阅读量:31 发布日期: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