马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 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(); //阻止事件传递
})();
|