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

yanghongchen666

思路流程:

获取元素:
        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



代码实现:

1. //登录
   
2. (function(){
   
3.     //获取元素
   
4.     var login = document.querySelector('.login');
   
5.     var loginBox = document.getElementById("loginBox");
   
6.     var wrap = document.querySelector("#loginBox .wrap");
   
7.     var closeBtn = document.querySelector("#loginBox .close");
   
8. 
   
9.     login.onclick = () => loginBox.classList.add('show');   //点击登录显示弹窗
   
10.     loginBox.onclick = closeBtn.onclick =() => loginBox.classList.remove('show'); //关闭登录显示弹窗
    
11.     //只有一个参数可以省略括号
    
12.     wrap.onclick = ev => ev.stopPropagation(); //阻止事件传递
    
13.    
    
14. })();

复制代码

yanghongchen666

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

阿萨德按时

hornwong

感谢分享！

伽羅~

amazed

6666666666666666666666666

linakoer