html阅读协议书弹窗样式,基于vue的弹窗功能实现

一个弹窗功能，只需要两行代码实现

下面是HTML

//右上角查看规则--弹窗开关

//弹窗模块

1.这是规则说明；

2.打王者不要射手走边路，会被越塔；

3.请参考第二条；

data里面returen{}的数据；初始的值为0，即不显示弹窗

export default {

data: function() {

return {

popup: 0,

};

},

methods(){

//打开活动规则页面

showpopup() {

this.popup = 1;

},

//关闭活动规则页面

closepopup() {

this.popup = 0;

},

}

};

下面是弹窗的CSS样式，半透明的背景

//这里面可以自定义字体样式等，都是CSS基础

.rule {

position: absolute;

width: 0.82rem;

height: 0.36rem;

top: 0.08rem;

right: 0rem;

background: #111111;

}

.login {

position: fixed;

font-size: 24px;

height: 360px;

width: 240px;

background-color: gold;

border-radius: 0.25rem;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

z-index: 1000;

}

.over {

position: fixed;

width: 100%;

height: 100%;

opacity: 0.7;//透明度为70%

filter: alpha(opacity=70);

top: 0;

left: 0;

z-index: 999;

background-color: #111111;

}

因为是实现功能所以没做太多样式美化，凑合看看

1548153265(1).png

1548153303(1).png