yanghongchen666 发表于 2022-2-16 14:51:41

JS功能分享(弹窗关闭&点击遮罩层关闭关闭)

本帖最后由 yanghongchen666 于 2022-2-16 14:53 编辑

思路流程:

获取元素:
        1. 弹窗按钮
        2. 弹窗
        3. 弹窗包裹层
        4. 关闭按钮

添加事件:

        打开弹窗
1. 给弹窗按钮添加onclick事件,当点击弹窗按钮的时候给登录弹窗添加一个名为show的class，使用classList.add进行添加,如果使用className则会覆盖当前的class

        遮罩层关闭弹窗
2. 给登录弹窗添加onclick事件，使用classList.remove移除弹窗身上show这个class
                注意: 这里需要关闭事件冒泡，不然点击登录窗口任意位置都会关闭

        关闭登录弹窗事件冒泡
3. 给弹窗包裹层添加点击事件，传入event参数，用event.stopPropagation();关闭事件冒泡

        关闭按钮关闭弹窗
4.给关闭按钮添加onclick事件，当点击发生移除弹窗身上的show这个class



代码实现:
//登录
(function(){
    //获取元素
    var login = document.querySelector('.login');
    var loginBox = document.getElementById("loginBox");
    var wrap = document.querySelector("#loginBox .wrap");
    var closeBtn = document.querySelector("#loginBox .close");

    login.onclick = () => loginBox.classList.add('show');   //点击登录显示弹窗
    loginBox.onclick = closeBtn.onclick =() => loginBox.classList.remove('show'); //关闭登录显示弹窗
    //只有一个参数可以省略括号
    wrap.onclick = ev => ev.stopPropagation(); //阻止事件传递
   
})();

yanghongchen666 发表于 2022-2-16 14:54:47

争取每周更新一个！！代码实现的部分用的是部分es6的写法原生的写法后续会更新上 记录一下比较使用的js功能顺便给鱼油们发发福利~如果有什么错误欢迎大家在评论区里指出，一起交流呀~ 大佬勿喷{:10_266:}

阿萨德按时 发表于 2022-2-16 14:59:53

{:5_106:} {:5_108:}

hornwong 发表于 2022-2-16 15:23:29

感谢分享！

伽羅~ 发表于 2022-2-16 15:32:57

{:5_106:}{:5_106:}

amazed 发表于 2022-2-17 00:19:13

6666666666666666666666666

linakoer 发表于 2022-2-17 13:39:35

{:5_106:}
页: [1]
查看完整版本: JS功能分享(弹窗关闭&点击遮罩层关闭关闭)