用原生js写出一个弹框+遮罩层的页面,完成弹框垂直居中页面且点击弹框外任何区域去掉弹框和遮罩层的功能

背景:Ant官网有个对话框Model组件.如图:

如果哪天不能用框架了,不能用组件了.只能用原生写页面.. 现在的我可能要一个页面写一年

写了很久很久...时间就不说了... 遇到的最难的问题就是:不知道怎么关闭弹框. 后面还是问了旁边的同事,教我用了document.querySelector()和.classList()还有addEventListener() 百度了一下它们的用法: document.querySelector():

addEventListener():

classList():

我的理解是:先匹配对象,再设置监听器.把设置了隐藏属性的css代码添加进去.最后利用stopPropagation()方法阻止弹框冒泡. 可能理解的不是很好..大概就是这个意思... 如果有对这几个方法理解比较好的..可以留下评论给我参考一下..谢谢 - 0 -

附上最终代码和结果图:

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>弹框和遮罩层</title>
    <style>
        .bg {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1000;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.45);
            text-align: end;
        }
        .point {
            position: absolute;
            width: 300px;
            height: 200px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius:5px;
        }
        .active {
            display: none
        }
    </style>
</head>
<body>
    <div>
        <div style="color:black;text-align: center;margin: 50px 300px 300px 100px;">我是页面</div>
        <div class="bg">我是遮罩层
            <div class="point">
                <p style="padding: 10px; text-align: left">标题</p>
                <hr>
                <p style="padding: 0px 0px 0px 10px; text-align: left">今天学习原生js</p>
                <div class="pop">
                </div>
            </div>
        </div>
        <div>
</body>

<script>
    const el = document.querySelector('.bg')
    el.addEventListener('click', () => {
        el.classList.add('active')
    })
    document.querySelector('.point').addEventListener('click', (e) => {
        e.stopPropagation()
    })
</script>
</html>

一进页面的样子:

点击除了白色弹框任意位置:

原文链接:segmentfault.com

上一篇:南半球被烧了21天!西方政界集体沉默!这是全世界最残忍的一幕
下一篇:JS基础06「数组」

相关推荐

  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    2 个月前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    14 天前
  • 项目中的导航栏搜索及搜索页面的思路

    项目背景 今天项目里的实习生在做搜索功能时,导航栏的搜索框与搜索页面的搜索框,在内容上竟然是各自独立的。。。。。 无论他怎么鼓捣,在搜索栏上进行搜索,搜索页面都没有任何反应。

    1 个月前
  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    15 天前
  • 页面进入后台如何关闭背景音乐

    之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然...

    10 个月前
  • 页面跳转的归纳

    前端工作有很多地方需要页面跳转,有很多种实现方法,这里做一下归纳。 HTML标签 一般形式上可以用target="blank": 历史跳转 ...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    6 个月前
  • 页面负载启动自举模型

    zanzuBrandon(https://stackoverflow.com/users/4398000/zanzu)提出了一个问题:Launch Bootstrap Modal on page lo...

    2 年前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    2 个月前

官方社区

扫码加入 JavaScript 社区