//WXML
<view class='modal-mask' bindtap='hideModal' catchtouchmove="true"></view>
<view class='modal-dialog' catchtouchmove="true" wx:if='{{showModal}}'>
//这里填充模态框内要展示的内容
<view>
//JS
Page({
/**
* 页面的初始数据
*/
data: {
showModal: true
},
onLoad: function () {
},
hideModal() {
this.setData({
showModal: false
});
}
})
//WXSS
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9998;
}
.modal-dialog {
width: 600rpx; //模态框的宽
height: 800rpx; //模态框的高
position: fixed;
top: 13%;
left: 10%; //top、left控制模态框的位置
//如要居中
//top: 50%;
//left: 50%;
//transform: translate(-50%,-50%);
z-index: 9999;
background: #fff;
border-radius: 20rpx;
display: flex;
flex-flow: column nowrap; //子元素纵向排列,不换行
justify-content: flex-start;
align-items: center;
}
这只是一个简单的例子,主要是wxml和wxss部分,至于显示和隐藏,根据自己需求来写。