效果
wxml
<!--新增(点击按钮)--><image class='img' src="{{add}}" bindtap='add_mode'></image><!-- 弹窗 --><view class="modal" wx:if="{{showModal}}"> <view class="modal-content"> <form bindsubmit="add_info"> <view class="modal_title">上传文件</view> <view class="modal-buttons"> <view class="one_btn" bindtap="submit">确认</view> <view class="two_btn" bindtap="cancel">取消</view> </view> </form> </view></view>
wxss
/* 遮罩层 */.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;}/* 窗口 */.modal-content { background-color: white; width: 90%; height: 80%; border-radius: 8rpx; position: relative;}/* 模态框标题 */.modal_title { padding: 3%; font-size: 110%; font-weight: bold;}/* 按钮 */.modal-buttons { width: 100%; height:7%; display: flex; bottom: 0; position: absolute; font-weight:bold;}.one_btn{ flex:1; display: flex; align-items: center; justify-content: center; background-color: #4b97e7; border-top: 1rpx solid #4b97e7; color: #fff; border-radius: 0;}.two_btn{ flex:1; display: flex; align-items: center; justify-content: center; width: 100%; border-top: 1rpx solid #4b97e7; border-radius: 0px; background-color: #fff; color: #4b97e7;}
js
const app = getApp()Page({ data: { add: app.globalData.icon + 'index/add.png', showModal: false // 控制模态框的显示和隐藏: false, }, // 打开上传文件弹窗 add_mode(){ this.setData({ showModal:true }) }, // 取消弹窗 cancel(){ this.setData({ showModal:false }) }, //确认弹窗内容 submit(){ console.log('确认') }})