微信小程序自定义弹出模态框禁止底部滚动功能

2023-07-29 14:25:04 611

图示：

wxml代码：


分享
电话咨询
立即报名







选择班次

{{item}}



取消
确定

wxss代码

.fix_bottom{
width:100%;
height:120rpx;
background:#fff;
position:fixed;
bottom:0;
border-top:1pxsolid#ccc;
display:flex;
}

.fix_bottomview{
width:33.333%;
border-left:1pxsolid#ccc;
line-height:120rpx;
text-align:center;
font-size:40rpx;
font-weight:bold;
}

.active{
color:#ffffff;
background:-moz-linear-gradient(left,#ff7b68,#ff5462);
/*Safari4-5,Chrome1-9*/
/*-webkit-gradient(,[,]?,[,]?[,]*)*/
background:-webkit-gradient(linear,left,from(#ff7b68),to(#ff5462));
/*Safari5.1+,Chrome10+*/
background:-webkit-linear-gradient(left,#ff7b68,#ff5462);
/*Opera11.10+*/
background:-o-linear-gradient(left,#ff7b68,#ff5462);
}

/*模态框*/

.modal-mask{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000;
opacity:0.5;
overflow:hidden;
z-index:9000;
color:#fff;
}

.modal-dialog{
width:540rpx;
overflow:hidden;
position:fixed;
top:40%;
left:0;
z-index:9999;
background:#f9f9f9;
margin:-180rpx105rpx;
border-radius:36rpx;
}

.modal-title{
height:100rpx;
line-height:100rpx;
font-size:36rpx;
color:#fff;
text-align:center;
background:-moz-linear-gradient(left,#ff7b68,#ff5462);
/*Safari4-5,Chrome1-9*/
/*-webkit-gradient(,[,]?,[,]?[,]*)*/
background:-webkit-gradient(linear,left,from(#ff7b68),to(#ff5462));
/*Safari5.1+,Chrome10+*/
background:-webkit-linear-gradient(left,#ff7b68,#ff5462);
/*Opera11.10+*/
background:-o-linear-gradient(left,#ff7b68,#ff5462);
border-bottom:1pxsolid#ccc;

}

.modal-content{

}

.concent_list{
width:100%;
height:100rpx;
border-bottom:1pxsolid#ccc;
line-height:100rpx;
text-align:center;
}

.modal-footer{
display:flex;
flex-direction:row;
height:86rpx;
font-size:34rpx;
line-height:86rpx;
}

.btn-cancel{
width:50%;
color:#666;
text-align:center;
border-right:1pxsolid#dedede;
}

.btn-confirm{
width:50%;
color:#ec5300;
text-align:center;
}

js代码

varvalue='小学升初中'
Page({

/**
*页面的初始数据
*/
data:{
showModal:false,
concent_list:['小学升初中','初一升初二','初二升初三','初中升高中'],
curindex:-1
},

/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){
},

/**
*弹窗
*/
showDialogBtn:function(){
this.setData({
showModal:true
})
},

/**
*隐藏模态对话框
*/
hideModal:function(){
this.setData({
showModal:false
});
},

/**
*对话框取消按钮点击事件
*/
onCancel:function(){
this.hideModal();
},
/**
*对话框确认按钮点击事件
*/
onConfirm:function(){
this.hideModal();

})
},

choose:function(e){
varindex=e.currentTarget.dataset.index
value=e.currentTarget.dataset.name
console.log(value)
this.setData({
curindex:index
})
}

})

模态框显示时禁止底部内容滚动可以在弹出时给底部包裹部分加上固定定位，模态框隐藏时取消固定定位

内容包裹的元素需要设置100%的宽度


底部所有内容内容内容

data数据的变化：

初始化时：

position:'auto',

模态框显示时：

position:'fixed',

模态框隐藏时：

position:'auto',

模态框显示时

总结

到此这篇关于微信小程序自定义弹出模态框禁止底部滚动功能的文章就介绍到这了,更多相关微信小程序弹出模态框内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序自定义弹出模态框禁止底部滚动功能

热门推荐

随机推荐