小程序首页遮罩层弹窗

最新推荐文章于 2024-08-15 23:03:45 发布

wzk2329

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量313

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wzk2329/article/details/113244561

版权

<!-- 遮罩层弹窗 -->

<view hidden="{{hiddenName}}" >

<view class='mask' ></view>

<view class='modal' style="top:{{height/2.5}}px">

<image class="rich_img" bindtap="clicklinqu"  src="{{cardbag_img}}" 

bindload="imageLoad" style="height:{{switerimgHeight}}rpx" mode="widthFix"  

data-effect_pic='{{richImgLists}}'  data-src='{{cardbag_img}}' id="{{index}}"></image>

<image class="rich_img" bindtap="gaibi"  src="{{canimg}}" style="width:50rpx;height:50rpx;margin-top:30rpx"></image>

</view>

</view>



//js代码

data: {

height: wx.getSystemInfoSync().windowHeight,

hiddenName:true,

}

// 遮罩层隐藏

gaibi: function () {

console.log('gai');

this.setData({

hiddenName:true

});

},





//css代码

/* 弹窗 */

.mask {

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: 1000;

background-color: rgba(0, 0, 0, 0.6)

  }

   

.modal {

position: absolute;



left: 50%;

transform: translate(-50%,-50%);



text-align: center;

height: 718rpx;

z-index: 1001;

/* background-color: #fff; */

}



.card-btn{

display: flex;

margin-top: -13rpx;

background-color: #fff;

z-index: 999999;

}

  

/* 弹窗 */