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

效果 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

差生文具多系列之最好看的编程字体

&#x1f4e2; 声明&#xff1a; &#x1f344; 大家好&#xff0c;我是风筝 &#x1f30d; 作者主页&#xff1a;【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正&#xff0c;不胜感激。 直达博主&#xff1a;「…

【文心一言】AI试用写代码体会:delphi、php

一、前言&#xff1a; 二、让【文心一言】编写一个函数 1. Delphi 语言&#xff08;文心一言的回复&#xff09; 2. php 语言&#xff08;文心一言回复&#xff09; 三、总结 一、前言&#xff1a; 众所周知&#xff0c;chatGPT是可以自动编写程序的&#xff0c;甚至可以运…

MyBatis缓存机制流程分析

前言 在进行分析之前&#xff0c;建议快速浏览之前写的理解MyBatis原理、思想&#xff0c;这样更容易阅读、理解本篇内容。 验证一级缓存 MyBatis的缓存有两级&#xff0c;一级缓存默认开启&#xff0c;二级缓存需要手动开启。 重复读取跑缓存 可以看到&#xff0c;第二次…

OpenAI承认GPT-4变懒,即将发布修复方案提升性能

目录 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 2一文秒懂人工智能全球近况 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 **划重点:** 1. &#x1f92f; 用户反馈:GPT-4使用者抱怨OpenAI破坏了体验&#xff0c;称模型几乎“害怕”提供答案。…

Wireshark使用技巧

Wireshark作为网络数据软件&#xff0c;功能强大&#xff0c;本专栏介绍仅为冰山一角&#xff0c;仅仅是一个入门级别的介绍&#xff0c;大部分功能还需要在日常工作中进行挖掘。 总结Wireshark软件的使用技巧如下&#xff1a; 1.合理部署Wireshark的位置&#xff0c;从源头保障…

基于Java SSM框架实现电影售票系统项目【项目源码+论文说明】

基于java的SSM框架实现电影售票系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#…

界面控件DevExpress WPF导航组件,助力升级应用程序用户体验!(下)

DevExpress WPF的Side Navigation&#xff08;侧边导航&#xff09;、TreeView、导航面板组件能帮助开发者在WPF项目中添加Windows样式的资源管理器栏或Outlook NavBar&#xff08;导航栏&#xff09;&#xff0c;DevExpress WPF NavBar和Accordion控件包含了许多开发人员友好的…

HTTP详解

1. web 1.1 web相关概念 软件架构 C /S&#xff1a;客户端/服务器端 需要安装客户端应用 B/S&#xff1a;浏览器/服务器端 不需要安装客户端应用&#xff0c;对于用户来说只需要记住域名访问就可以,高效,客户端零维护 资源分类 静态资源&#xff1a;所有用户访问后&#x…

数据库系统原理与实践 笔记 #12

文章目录 数据库系统原理与实践 笔记 #12事务管理和并发控制与恢复(续)并发控制SQL-92中的并发级别基于锁的协议基于锁的协议的隐患锁的授予封锁协议两阶段封锁协议多粒度粒度层次的例子意向锁类型相容性矩阵多粒度封锁模式基于时间戳的协议基于时间戳协议的正确性基于有效性检…

怎样在PPT中加入音频文件?记好这4个简单操作!

“我要制作一个比较专业的PPT来汇报工作成果&#xff0c;想在PPT里加一段音乐&#xff0c;但是不知道应该如何操作&#xff0c;有没有朋友可以指导一下呢&#xff1f;” PPT作为一种常用的文件形式&#xff0c;很多用户会将其用于工作汇报&#xff0c;期末总结以及各种演讲。在…

六级高频词组2

目录 词组 参考链接 词组 51. arise from&#xff08;be caused by&#xff09; 由…引起。 52. arrange for sb.sth. to do sth. 安排…做… 53. arrive on 到达&#xff1b; arrive at 到达某地&#xff08;小地方&#xff09;&#xff1b;得出&#xff0c;作出&#x…

zookeeper基础内容

文章目录 Zookeeper基础概述数据结构Zookeeper节点操作zookeeper节点操作命令数据模型 znode 结构 zookeeper java客户端ZooKeeper原生APICuratorzkClient对比总结 Zookeeper基础 概述 zookeeper&#xff08;分布式协调服务&#xff09; 本质&#xff1a;小型的文件存储系统监…

Springboot内置Tomcat线程数优化

Springboot内置Tomcat线程数优化 # 等待队列长度&#xff0c;默认100。队列也做缓冲池用&#xff0c;但也不能无限长&#xff0c;不但消耗内存&#xff0c;而且出队入队也消耗CPU server.tomcat.accept-count1000 # 最大工作线程数&#xff0c;默认200。&#xff08;4核8g内存…

Spring 的缓存机制【记录】

一、背景 在最近的业务需求开发过程中遇到了“传说中”的循环依赖问题&#xff0c;在之前学习Spring的时候经常会看到Spring是如何解决循环依赖问题的&#xff0c;所谓循环依赖即形成了一个环状的依赖关系&#xff0c;这个环中的某一个点产生不稳定变化都会导致整个链路产生不…

OpenCV-opencv下载安装和基本操作

文章目录 一、实验目的二、实验内容三、实验过程OpenCV-python的安装与配置python下载和环境配置PIP镜像安装Numpy安装openCV-python检验opencv安装是否成功 openCV-python的基本操作图像输入和展示以及写出openCV界面编程单窗口显示多图片鼠标事件键盘事件滑动条事件 四、实验…

Altman作了多少恶?排挤首席科学家出GPT5开发、离间董事会、PUA员工

在山姆奥特曼&#xff08;Sam Altman&#xff09;被OpenAI董事会突然解职后的几天里&#xff0c;这个消息在科技圈引发轰动&#xff0c;该公司内部员工和许多科技界人士甚至将此举比作一场政变。 奥特曼被解雇后立即传出的说法是&#xff0c;OpenAI的广大员工都很喜欢他&#x…

一入一出模拟量两线制无源 4-20mA隔离变送器

一入一出模拟量两线制无源 4-20mA隔离变送器 特征与应用&#xff1a; ◆薄体积&#xff0c;低成本&#xff0c;国际标准 DIN35mm 导轨安装方式 ◆两端隔离(输入、输出间相互隔离) ◆单通道输入单通道输出 ◆高精度等级(0.1%,0.2% F.S) ◆高线性度(0.1% F.S) ◆高隔离电压(3000…

32位ADC布局的指导方针

接地必须是一个低阻抗连接&#xff0c;以使回流电流不受干扰地流回各自的源。接地面连接尽量短且直。使用过孔连接接地线时&#xff0c;应并联多个过孔&#xff0c;以减小对地阻抗。 混合信号布局有时包含在一个位置捆绑在一起的单独的模拟和数字地平面;但是&#xff0c;当模拟…

活动回顾 | 菊风亮相 GTC2023 全球流量大会

2023年12月5日-12月6日&#xff0c;由白鲸出海主办的【GTC2023 全球流量大会】在中国深圳盛大召开。 本次大会荟聚海内外优质企业品牌&#xff0c;以专业的“展会”形式&#xff0c;全方位呈现跨境出海的成果&#xff0c;探索多元化的跨境商业模式&#xff0c;大会涵盖社交娱乐…