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

news2024/11/24 12:50:42

效果 

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.coloradmin.cn/o/1301841.html

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

相关文章

用keepalived做mysql高可用

两台机器(centos7系统)安装mysql [rootmysql-keep-master ~]# wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm [rootmysql-keep-master ~]# rpm -ivh mysql80-community-release-el7-3.noarch.rpm [rootmysql-keep-master ~]# yum -y install yu…

2024年网络安全竞赛-网站渗透

网站渗透 (一)拓扑图 1.使用渗透机对服务器信息收集,并将服务器中网站服务端口号作为flag提交; 使用nmap工具对靶机进行信息收集 2.使用渗透机对服务器信息收集,将网站的名称作为flag提交; 访问页面即可 3.使用渗透机对服务器渗透,将可渗透页面的名称作为flag提交…

RT-DETR优化:Backbone改进 | UniRepLKNet,通用感知大内核卷积网络,RepLK改进版本 | 2023.11

🚀🚀🚀本文改进: UniRepLKNet,通用感知大内核卷积网络,ImageNet-22K预训练,精度和速度SOTA,ImageNet达到88%, COCO达到56.4 box AP,ADE20K达到55.6 mIoU 🚀🚀🚀RT-DETR改进创新专栏:http://t.csdnimg.cn/vuQTz 学姐带你学习YOLOv8,从入门到创新,轻轻松松…

创投课程第四期 | Web3一级市场投资框架的演变及投资人能力框架的构成

协会邀请了来自Zonff Partners的合伙人——Colin&#xff0c;作为VC创投课程第4期的嘉宾&#xff0c;在北京时间12月9日(周六)下午14:00 PM-15:00 PM于蚂蚁链科技产业创新中心进行线下分享&#xff0c;届时将与所有对Web3投资、创业心怀热忱的朋友们共同探讨《WEB3一级市场投资…

【机器学习实训项目】黑色星期五画像分析

目录 前言 一、项目概述 1.1 项目简介 1.2 项目背景 1.3 项目目标 二、数据分析 2.1 导入库 2.2 数据基本信息 三、画像分析 3.1 画像1&#xff1a;消费金额Top10 3.2 画像2&#xff1a;高频消费Top10 3.3 画像3&#xff1a;人均消费金额Top10 3.4 画像4&#xff1a;男女消费对…

Java代码审计之SpEL表达式注入漏洞分析

文章目录 前言SpEL表达式基础基础用法安全风险案例演示 CVE-2022-22963漏洞简述环境搭建反弹shell CVE漏洞调试分析本地搭建调试分析补丁分析 总结 前言 表达式注入是 Java 安全中一类常见的能够注入命令并形成 RCE 的漏洞&#xff0c;而常见的表达式注入方式有 EL 表达式注入…

Proteus仿真--射击小游戏仿真设计

本文介绍基于proteus射击小游戏仿真设计&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 K1-K4为4个按键&#xff0c;用于上移、下移、确认等&#xff0c;模拟单机游戏 仿真运行视频 Proteus仿真--射击小游戏仿真设计 附完整Proteus仿真资料代码资料 …

个人博客搭建保姆级教程-发布篇

发布方式 可以使用gitee或者github托管博客内容&#xff0c;然后直接在服务端nginx目录进行拉取。或者将内容压缩&#xff0c;拷贝到对应目录后再进行解压。 发布位置 前面我们已经部署了nginx服务器。这里我们需要将对应的html文件拉取或拷贝到对应的文件夹&#xff0c;即n…

销售技巧培训之如何提升门店销售技巧

销售技巧培训之如何提升门店销售技巧 在如今竞争激烈的商业环境中&#xff0c;提升门店销售技巧对于实现销售业绩的飞跃至关重要。本文将探讨如何通过了解客户需求、制定优惠策略、优化销售流程、加强顾客关系管理等手段来提升门店销售技巧&#xff0c;并结合实际案例进行分析…

为什么说AI现在还不行!

AI最近有点被妖魔化了&#xff0c;很像一个老虎在还没有橘猫大的时候&#xff0c;就已经被天天当成虎力大仙来讨论。这种普遍的高预期其实是有害的&#xff0c;尤其是当事情本身还需要耐心细致深耕且长跑的时候。资本、品牌可以匹配高预期所对应的增长倍数&#xff0c;业务则不…

传音荣获2023首届全国人工智能应用场景创新挑战赛“智能遥感专项赛”三等奖

11月26日&#xff0c;2023首届全国人工智能应用场景创新挑战赛“智能遥感专项赛”在北京圆满落幕。传音参赛项目《传音智慧应用平台产业化》凭借在技术攻关、社会效益和经济效益等多方面的突出优势荣获“智能遥感专项赛”三等奖。 本次竞赛以“场景驱动数智强国”为主题&#…

教师的未来发展前景

大家好&#xff5e;今天来聊聊一个大家都超关心的话题&#xff1a;教师的未来发展前景&#xff01;毕竟&#xff0c;教育可是人类文明的基石&#xff01; 1. 技术赋能&#xff0c;让教育更高效 未来&#xff0c;AI、大数据和虚拟现实等技术会越来越多地应用在教育中。老师们可…

报错解决:ImportError: /usr/lib64/libstdc++.so.6: version GLIBCXX_3.4.20 not found

问题描述 使用LAC&#xff08;https://github.com/baidu/lac/blob/master/README.md&#xff09;时&#xff0c;使用如下指令安装lac&#xff1a; pip install lac执行如下代码&#xff1a; from LAC import LAC报错&#xff1a; Error: Can not import paddle core while …

一文讲解如何从 Clickhouse 迁移数据至 DolphinDB

ClickHouse 是 Yandex 公司于2016年开源的 OLAP 列式数据库管理系统&#xff0c;主要用于 WEB 流量分析。凭借面向列式存储、支持数据压缩、完备的 DBMS 功能、多核心并行处理的特点&#xff0c;ClickHouse 被广泛应用于广告流量、移动分析、网站分析等领域。 DolphinDB 是一款…

算法leetcode|92. 反转链表 II(rust重拳出击)

文章目录 92. 反转链表 II&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a;进阶&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 92. 反转链表 II&#xff1a; 给你单链表的…

自动驾驶MCU软件架构说明

文档 变更历史 版本Version 状态 Status 内容 Contents 日期 Date 撰写 Editor 批准 Approver Term 编号 No. 术语和缩写 Terms & Abbreviation 解释 Explanation 引用文档 编号 No. 文档名称 Document Name 文档版本 Do…

做题总结 59. 螺旋矩阵 II

跟着代码随想录顺序到这题&#xff0c;不会做。不知道怎么才能实现。 PS&#xff1a;我是用 java实现的。 题目&#xff1a;给你一个正整数 n &#xff0c;生成一个包含 1 到 n^2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 总结思路为&am…

【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇

​ &#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 HarmonyOS 4.0 技术介绍&#xff1a; HarmonyOS三大特征&#xff1a; 1.实现硬件互助&#…

【Python必做100题】之第七题(求圆的面积)

圆的面积公式&#xff1a;S pi * r * r 代码如下&#xff1a; pi 3.14 r float(input("请输入圆的半径&#xff1a;")) s pi * r * r print("圆的面积是&#xff1a;%.3f" %s) 运行结果如下&#xff1a; 总结&#xff1a; 1、圆的面积公式&#xff…

【Spring教程17】Spring框架实战:实例详解解读AOP通知类型的使用

欢迎大家回到《Java教程之Spring30天快速入门》&#xff0c;本教程所有示例均基于Maven实现&#xff0c;如果您对Maven还很陌生&#xff0c;请移步本人的博文《如何在windows11下安装Maven并配置以及 IDEA配置Maven环境》&#xff0c;本文的上一篇为《AOP配置管理中AOP切入点表…