效果如下:
这里有三个弹窗 但遮罩层只有最新打开的弹窗有
具体实现
首先统一 弹窗遮罩层的类名 假设class 名为popup-fixed-scroll
,我们只需要保证这个类名只有弹窗的时候使用,且一个弹窗只有一个。这样,当我们打开两个的弹窗时 就存在了两个 class 名为popup-fixed-scroll
的遮罩层元素,可以通过JS的 getElementsByClassName 返回的一个数组,新弹出的窗口为数组最后面那个,由此,我们可以通过判断 其余窗口遮罩层都设置透明,只保留最后数组元素的遮罩层样式。注意:
弹窗出现与销毁时都需要判断。
/*
设置遮罩层
*/
setbgColor() {
let bgColor1 = "rgba(0, 0, 0, 0)";
let bgColor2 = "rgba(0, 0, 0, 0.6)";
let scrollDom = document.getElementsByClassName("popup-fixed-scroll");
let scrollDomLength = scrollDom.length;
for (var i = 0; i < scrollDomLength; i++) {
if (i < scrollDomLength - 1) {
scrollDom[i].style.backgroundColor = bgColor1;
} else {
scrollDom[i].style.backgroundColor = bgColor2;
}
}
},
//使用
mounted() {
this.setbgColor();
},
beforeDestroy() {
this.setbgColor();
},