微信小程序实现弹窗效果
实现思路模态对话框之所以被叫做“模态”，就是因为在它弹出的时候，用户如果不关闭这个对话框，是无法对其他窗口进行操作的。
那么这样一来，我们的思路就很明确了：
1. 构建一个蒙层（mask），使得背景变暗，并且阻止用户对对话框外界面的这里写代码片点击事件；
2. 构建一个对话框，在需要时弹出即可（弹出同时触发蒙层）。
.wxml
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
<view bindtap="closeMask" class="modal-close">x</view>
<image src="/assets/images/newer.gif"/>
</view>
<button bindtap="submit">点我弹窗</button>
.wxss
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
}
.modal-close {
position: fixed;
top: -30rpx;
right: -15rpx;
color: #ffffff;
}
js
Page({
data: {
showModal: false
},
submit: function() {
this.setData({
showModal: true
})
},
preventTouchMove: function() {
},
closeMask: function() {
this.setData({
showModal: false
})
}
})
页:
[1]