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

效果

wxml

html 复制代码
<!--新增(点击按钮)-->
<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

css 复制代码
/* 窗口 */
.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

javascript 复制代码
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('确认')
  }
})
相关推荐
晓风伴月8 小时前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习9 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
2501_9160137411 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
军军君0113 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
两个月菜鸟13 小时前
微信小程序进度条cavans
微信小程序·小程序
從南走到北13 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
pearbing14 小时前
持续优化小程序排名,稳定获取搜索流量
小程序
2501_9151063215 小时前
Fiddler 中文版抓包实战 构建标准化调试流程提升团队协作效率
android·ios·小程序·https·uni-app·iphone·webview
mg66816 小时前
微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
微信小程序·小程序
sanhuamao16 小时前
Taro+nestjs+mongodb实现健身记录微信小程序
微信小程序·taro·nestjs