WXML
<!-- 自定义模态框 --> <view class="mask" bindtap='modelCancel' catchtouchmove="preventTouchMove" wx:if="{{showModalDlg}}"></view> <view class="modalDlg" wx:if="{{showModalDlg}}"> <text>获取授权</text> <text>检测到您未授权小程序获取您的用户信息(头像/昵称),是否重新授权? 请依次点击 授权->登录</text> <view> <button open-type="openSetting">授权</button> <button bindtap="toLogin">登录</button> </view> </view>
WXSS
.mask{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; z-index: 9000; opacity: 0.7; } .modalDlg{ width: 580rpx; height: 400rpx; position: fixed; top: 60%; left: 0; z-index: 9999; margin: -370rpx 85rpx; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; } .modalDlg>text{ font-size:30rpx; display: flex; flex-direction: row; justify-content: center; align-items: center; } .modalDlg>text:first-child{ height:80rpx; font-weight: 700; width:100%; border-bottom: 1rpx solid #CCC; } .modalDlg>text:nth-child(2){ height:100rpx; margin:0 40rpx; } .modalDlg>view{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .modalDlg>view>button{ width:290rpx; height:80rpx; font-size: 30rpx; border-radius: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; border-top: 1rpx solid #CCC; } .modalDlg>view>button:first-child{ border-right:1rpx solid #CCC; } .modalDlg>view>button::after { border-radius: 0; }
JS
Page({ data: { showModalDlg: true }, preventTouchMove: function () { //阻止触摸 }, modelCancel:function(){ this.setData({ showModalDlg: false }) }, })