浏览器原生弹窗功能

原创已于 2025-08-29 16:55:13 修改 · 243 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端 #html

于 2025-08-29 16:39:00 首次发布

HTMLCSS手写专栏收录该内容

2 篇文章

订阅专栏

如何封装一个弹窗组件？

弹窗的两种模式

1.普通弹窗: 背后不影响，tap键切换的时候不会影响后面，包括滑动的时候也是固定不动的。

2.模态弹窗：后面是半透明，并且有一个毛玻璃效果，其他效果和普通弹窗一样。

浏览器原生支持弹窗

<dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。

当没有设置 open 属性时，对话框不应该显示给用户。推荐使用 .show() 或 .showModal() 方法来渲染对话框，而不是使用 open 属性。

::backdrop CSS 伪元素可用于给使用 HTMLDialogElement.showModal() 显示的 <dialog> 元素背景添加样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器原生弹窗</title>
    <style>
        dialog {
            border-radius: 5px;
            border-color: #ccc;
        }

        dialog::backdrop {
            background-color: rgba(137, 132, 132, 0.6);
            /* 毛玻璃效果 */
            backdrop-filter: blur(1px);
        }
    </style>
</head>

<body>
    <button onclick="dia.showModal()">弹窗</button>
    <input type="text">
    <dialog id="dia">
        <div>
            <p>弹窗功能</p>
            <p>
                <input type="text">
            </p>
            <p>
                <input type="text">
            </p>
            <button onclick="dia.close()">关闭</button>
        </div>
    </dialog>
</body>

</html>