别再用alert()做弹窗了，浏览器自带的系统级模态框太好用了！

更新日期: 2024-02-27阅读: 2k标签: 弹窗分享

复制链接

新浪微博

QQ 好友

扫一扫分享

摘要

在很多场景下，都需要弹窗用于交互，一般UI框架都有模态框，如果你做一个小单页，不引入UI库，你将无法使用模态框，或者使用JavaScript自带的alert弹出提醒，或者是自己写，这都不是很便利。

dialog 是html5新增的语义化双标签，用于展示一个交互式的模态对话框。这是浏览器自带的模态框，非常好用。

上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>dialog</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #modal {
            border: none;
            border-radius: 8px;
            margin: 0 auto;
            padding: 20px;
            position: fixed;
            top: -100%;
            left: 20%;
            transform: translateX(-50%);
            animation: slideIn 0.3s forwards;
        }

        @keyframes slideIn {
            from {
                top: -100%;
            }
            to {
                top: 10%;
            }
        }

        #modal .modal-header {
            width: 400px;
            padding: 10px 0;
            display: flex;
            border-bottom: 1px solid #eee;
        }
        #modal .modal-header .modal-title {
            flex: 1;
            font-size: 20px;
        }
        #modal .modal-content {
            border-bottom: 1px solid #eee;
            padding: 20px 0;
            font-size: 15px;
        }
        #modal .modal-header .modal-close {
            width: 50px;
            font-size: 23px;
            text-align: right;
            cursor: pointer;
        }
        #modal::backdrop {
            position: fixed;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            background: rgba(0, 0, 0, 0.2);
        }

    </style>
</head>
<body>

    <button onclick="modal.showModal()">打开</button>
    <dialog id="modal">
        <div class="modal-body">
            <div class="modal-header">
                <div class="modal-title">标题</div>
                <div class="modal-close" onclick="modal.close()">&times;</div>
            </div>
            <div class="modal-content">
                这是内容，这是内容。
            </div>
        </div>
    </dialog>
</body>
</html>

这个模态框默认样式是非常丑的，好在可以自定义样式，我对这个默认样式进行了美化，可以说是丑小鸭变天鹅，我还加入了动画。

作者：TANKING，来源：https://segmentfault.com/a/1190000044660098

链接: https://fly63.com/article/detial/12662

别再用alert()做弹窗了，浏览器自带的系统级模态框太好用了！

摘要

上代码

页面弹窗toast和加载loading

浏览器的三种Js弹窗方式

搞懂extend和$mount原理并实现一个命令式Confirm弹窗组件

优秀好看的弹窗界面设计

弹窗和 window 的方法

javaScript实现弹窗拖动

html5 dialog弹窗的使用介绍

vue3优雅的使用useDialog