vue.js和css结合实现弹框居中以及背景半透明

本文中要实现的是点击注册按钮弹出一个注册信息框，要求弹框居中，且背景透明

效果：

1.vue.js中的template部分代码（html中的body部分）

其中第一个div模块为要点击的模块，第二个div模块是为了实现背景半透明的背景模块，第三个div模块为点击后出现的居中的注册信息模块。

<div class="login">
  <span class="loginS" @click="showR">注册</span>
  <span> | </span>
  <span class="loginS"> 登陆</span>
</div>
<div id="forPop"></div>
<div v-if="showRegister" class="registerPart">
  <h1>注册</h1>
  <form v-model="registerInfo">
    <label for="userN">用户名:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
    <input id="userN" type="text" placeholder="请输入10位字符以内的用户名"></input><br>
    <label for="pw">密码:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
    <input id="pw" type="text" placeholder="请输入由数字大写字母和小写字母组成的密码"></input><br>
    <label for="pw">确认密码：</label>
    <input id="pwa" type="text" placeholder="请确认密码"></input><br>
    <p id="registerError"></p>
    <input type="submit"></input>
  </form>
</div>

2.实现弹框居中的css设置

主要通过left、top以及负的margin设置来完成居中。同时为了时弹框不影响原有的局内元素，通过position:fixed来设置位置。

.registerPart {
  background-color: #d6d6d6;
  width: 500px;
  height: 400px;
  border: #888888 2px solid;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  margin-left: -250px;
}

3.辅助实现半透明的Id="forPop"的div模块的css设置

这里需要将此模块设置为全屏大小，背景颜色为黑色，通过设置透明度来遮盖底层视图完成背景半透明的实现。

#forPop {
  width: 100%;
  height: 100%;
  top:0px;
  left:0px;
  position:absolute;
  /*因为IE不支持opacity 所以用filter 为了兼容两个都写*/
  filter: Alpha(opacity=60);
  opacity:0.6;
  background:#000000;
  display:none;
}

4.点击时完成半透明的效果和弹框的js实现

这里将之前的辅助模块设置为可见，同时修改弹框模块的if参数为true。

showR(){
  //document.getElementById("forPop).style.display = "block"
  $('#forPop').css("display", "block");
  this.showRegister = true;
}