View层
点击出现弹框
点击出现弹框
数据层：
export default {
data() {
return {
showModal: false
};
}
};
样式层：
.mask {
background-color: #000;
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}
.pop {
background-color: #fff;
position: fixed;
top: 100px;
left: 300px;
width: calc(100% – 600px);
height:calc(100% – 200px);
z-index: 2
}
.btn {
background-color: #fff;
border-radius: 4px;
border: 1px solid blue;
padding: 4px 12px;
}
关键点：
1.mask层的层级(z-index)要比弹出的pop的层级低。
2.wow,写完啦，就是这么简单….
完整代码：
点击出现弹框
点击出现弹框
export default {
data() {
return {
showModal: false
};
}
};
.mask {
background-color: #000;
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}
.pop {
background-color: #fff;
position: fixed;
top: 100px;
left: 300px;
width: calc(100% – 600px);
height:calc(100% – 200px);
z-index: 2
}
.btn {
background-color: #fff;
border-radius: 4px;
border: 1px solid blue;
padding: 4px 12px;
}
扩展：按钮在父组件，弹框是一个子组件，会涉及到父子组件之间的传值。
——-