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

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

效果：

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

其中第一个div模块为要点击的模块，第二个div模块是为了实现背景半透明的背景模块，第三个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;
}