微信小程序之自定义弹出框

自定义弹框与app 中的解决方法一样。首先，要先做一个灰色的背景rulePopView覆盖住整个屏幕。然后做个白色背景视图ruleDesView。定义一个bool值ruleDesImageHidden控制弹框的显示与隐藏。
.wxml

<!-- 活动规则弹框 -->
<view class='rulePopView'  hidden='{{ruleDesImageHidden}}'>

 <!-- 活动规则详细说明图 -->
 <view class='ruleDesView'>
  <image class='ruleDesImage' src="{{activity.ActRules?activity.ActRules:ruleDesImageUrl}}" mode = 'aspectFit'></image>
 
 </view>

 <!-- 取消 -->
 <view class='cancelView'>
  <image class='cancelImage' src="http://weixin.siyanli.net.cn/static/miniimg/guanbichuangkou.png" mode = 'aspectFit' bindtap='ruleDesHiddenAction'></image>
 </view>

</view>

.wxss

/* 活动规则弹框 */
.rulePopView {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
    flex-direction: column;
  align-items: center;
  position: relative;

}
.ruleDesView {
  top: 10%;
  right: 8%;
  left: 8%;
  height:50%;
  opacity: 1;
  /* background-color: white; */
  position: absolute;
}
.ruleDesImage {
  width: 100%;
  height: 100%;
}
.cancelView {
  top: 60%;
  height: 200rpx;
  right:46%;
  left: 46%;
  position: absolute;
}
.cancelImage {
  width: 100%;
  height: 100% ;
}

  ruleAction:function(){
     var that = this;
     that.setData({
       ruleDesImageHidden: false,
     })
  },

  data: {
    huoDongimageUrl:'http://weixin.siyanli.net.cn/static/miniimg/guize-01.png',
    headImageUrl:'',      
    ruleDesImageUrl:'',
    ruleDesImageHidden:true,
},

屏幕快照 2019-04-26 上午9.49.38.png