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

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

摘要

在很多场景下,都需要弹窗用于交互,一般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

页面弹窗toast和加载loading

都采用单例模式,原生js实现,兼容老版本浏览器内核,请将用es6语法的地方作修改.loading 加载代码: 样式全部通过js创建style标签注入head中,若需修改,请修改loadignStyle和loadignChildStyle 的值即刻。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

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

如每个使用的地方需要引入该组件,需要注册,需要给组件加ref引用,需要调用事件来控制状态。其实这个组件相对来说是比较独立的,我们在使用组件库的时候

优秀好看的弹窗界面设计

不管是用户还是设计师角色,弹窗界面应该都是经常能碰到的。弹窗(pop-up)能够让用户更聚焦,不用离开当前页面便能轻松快速地完成任务。 但是千篇一律的界面设计很容易让人忽略了它本身的美感。

弹窗和 window 的方法

弹窗自古以来就存在。最初的想法是,在不关闭主窗口的情况下显示其他内容。目前为止,还有其他方式可以实现这一点:我们可以使用 fetch 动态加载内容,并将其显示在动态生成的 <div> 中。弹窗并不是我们每天都会使用的东西。

javaScript实现弹窗拖动

通过原生javaScript进行窗口拖动的实现,通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动

html5 dialog弹窗的使用介绍

说起 dialog 标签,可能很多人都比较陌生,毕竟这个标签直到 HTML5.2 标准固定,也只是 chrome 的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话

vue3优雅的使用useDialog

在日常开发时,弹窗是一个经常使用的功能,而且重复性极高,你可能会遇到下面这些问题:1、一个页面内多个弹窗, 要维护多套弹窗状态,看的眼花缭乱2、弹窗内容比较简单,声明变量 + 模板语法的方式写起来比较麻烦

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!