一個彈窗功能，只需要兩行代碼實現(xiàn)
下面是HTML
//右上角查看規(guī)則--彈窗開關(guān)
<div class="righttop">
<a class="rule" href="javascript:;" @click="showpopup"></a>
</div>
//彈窗模塊
<div v-show="popup" @click="closepopup">
<!--這里是要展示的內(nèi)容層-->
<div class="login">
1.這是規(guī)則說明；<br>
2.打王者不要射手走邊路，會被越塔；<br>
3.請參考第二條休讳；
</div>
<!--這里是半透明背景層-->
<div class="over"></div>
</div>
data里面returen{}的數(shù)據(jù)；初始的值為0尿孔，即不顯示彈窗
export default {
data: function() {
return {
popup: 0,
};
},
methods(){
//打開活動規(guī)則頁面
showpopup() {
this.popup = 1;
},
//關(guān)閉活動規(guī)則頁面
closepopup() {
this.popup = 0;
},
}
};
下面是彈窗的CSS樣式俊柔，半透明的背景
//這里面可以自定義字體樣式等，都是CSS基礎(chǔ)
.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;
}
因為是實現(xiàn)功能所以沒做太多樣式美化活合，湊合看看
1548153265(1).png
1548153303(1).png
