微信小程序:模态框(弹窗)的实现

小程序 0

效果 

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('确认')  }})

也许您对下面的内容还感兴趣: