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

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

效果图：

具体代码：

界面代码：

<view class="container">
  <view class="userinfo" wx:if="{{!hasUserInfo && canIUse}}" >
    <view class='dialog-mask'></view>
    <!-- 没有获取授权弹出弹窗 -->
    <view class="socket">
      <view class='title' >小提示</view>
      <view class='content' >吃饭睡觉打豆豆</view>
      <view class='footer'>
        <button open-type="getUserInfo" bindgetuserinfo="getUserInfo" style='color:#969696;'> 知道了 </button>
      </view>     
    </view>
  </view>

样式代码：

/* 弹窗效果 */
.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}