菜鸟学习小程序之弹窗效果

小程序现在改成了要先点击按钮才能弹出授权界面，只放个按钮感觉太丑了，就自己找资料研究出了一个弹窗，就不会觉得太丑了。

效果图：

具体代码：

界面代码：

  
    
    
    
      小提示
      吃饭睡觉打豆豆
      
         知道了 
           
    
  

样式代码：

/* 弹窗效果 */
.dialog-mask{
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}
.socket{
  position: fixed;
  z-index: 5000;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  overflow: hidden;
  border: 1px solid #DDD;
  width: 70%;
  border-radius: 5px;
}
.title{
  text-align:center;padding:12px;border-bottom:1px solid #eee;color:#969696;border-top-left-radius: 5px;border-top-right-radius: 5px;
}
.content{text-indent:2em;padding:15px;font-size:18px;color:#646464;}
 .container{padding: 0px}