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

效果

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('确认')
  }
})
相关推荐
腾马科技5 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码10 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名14 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风15 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者815 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088915 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌16 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26716 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063217 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆17 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序