一個彈窗功能，只需要兩行代碼實現(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