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

效果 

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.mfbz.cn/a/237936.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入Docker命令行:探索常用命令和实用技巧

Docker命令行界面是每个容器开发者的得力工具。在这篇文章中&#xff0c;将深入探讨一系列常用的Docker命令&#xff0c;以及一些实用技巧&#xff0c;通过更丰富的示例代码&#xff0c;帮助大家更全面地理解和运用Docker命令行工具。 1. Docker基本命令 1.1 镜像操作 深入了…

【打印机如何设置只打印黑色】

目录 1. Window X 打开&#xff0c;选择“设置” 2. 选择“打印机和扫描仪” 3. 选择对应的“打印机” 4. 选择“打印首选项” 5. 选择“页设置”&#xff0c;并选择“打印选项” 6. 用于打印的墨水&#xff0c;改为“仅黑色” 7. 点击“确定”&#xff0c;关闭即可 1. Wi…

visual studio 2022 IDE对C++代码反汇编

敲一段代码&#xff0c;在windows电脑儿上&#xff0c;忽然想用visual studio瞧瞧这段代码的汇编长什么样&#xff0c;怎么做呢&#xff1f; 代码有了 #include <stdio.h> void sort(int*,int);int main(){int array[] { 977,1,32,3,99,8,7,5,23,6 };int length int(…

RocketMQ Connect详解

一、概览 RocketMQ Connect是RocketMQ数据集成重要组件&#xff0c;可将各种系统中的数据通过高效&#xff0c;可靠&#xff0c;流的方式&#xff0c;流入流出到RocketMQ&#xff0c;它是独立于RocketMQ的&#xff0c;一个单独的分布式、可扩展、可容错系统&#xff0c; 它具备…

解密:为何YouTube 5秒广告‘秒’过,国内视频平台坚持15秒?

大家好&#xff0c;我是小米&#xff01;今天我们来聊一个热门的话题&#xff1a;为什么YouTube可以在5秒后跳过广告&#xff0c;而国内视频平台却坚持15秒呢&#xff1f;这可不是简单的数字差异&#xff0c;而是一个关乎用户体验、商业模式以及产品策略的大问题。作为一个热衷…

IBM DMC运行在RedHat 9的FIPS模式

文章目录 环境步骤打开RedHat的FIPS模式安装DMCnssdbpk12util和certutil导入certificate导入Liberty的SSL key导入Java的certificate查看nssdb&#xff08;可选&#xff09; 配置jvm.options配置server.xml配置java.security配置dswebserver_override.properties重启DMC验证 常…

解读 | 为什么有很多名人让人们警惕人工智能

大家好&#xff0c;我是极智视界&#xff0c;欢迎关注我的公众号&#xff0c;获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」&#xff0c;星球内有超多好玩的项目实战源码和资源下载&#xff0c;链接&#xff1a;https://t.zsxq.com/0aiNxERDq 这个话题总能引起很…

Firewalld 防火墙配置

文章目录 Firewalld 防火墙配置1. Firewalld 概述2. 区域名称及策略规则3. Firewalld 配置方法4. Firewalld 参数和命令5. Firewalld 两种模式6. Firewalld 使用 Firewalld 防火墙配置 1. Firewalld 概述 firewalld 是一个动态防火墙管理器&#xff0c;作为 Systemd 管理的防…

串口通信(1)-硬件知识

本文讲解串口通信的硬件知识。让读者快速了解硬件知识&#xff0c;为下一步编写代码做基础。 目录 一、概述 二、串口通信分类 2.1信息的传送方向进行分类 2.2同步通信和异步通信 三、串口协议 3.1 RS232 3.1.1 电气特性 3.1.2 连接器的机械特性 3.1.3 连接类型 3.1…

算法:买卖股票的最佳时机(快慢指针和动态规划)

快慢指针 时间复杂度 O(n) 空间复杂度 O(1) /*** param {number[]} prices* return {number}*/ var maxProfit function (prices) {let l 0let r 1let temp 0while (r < prices.length - 1) {// 如果当前左值大于右值说明当前不是最佳买入时机// 所以将右指针赋值给左指…

痤疮分割 实验心路历程

数据集的制作 将labelme生成的标注文件记普通的json文件转成coco数据集格式的json文件 图像分辨率过大 如果不做任何调整&#xff1a; 会出现“killed”的报错&#xff0c;表示图片像素过大&#xff0c;显卡内存不够&#xff0c;无法支撑训练 显卡 换成更高性能的显卡&am…

视频剪辑:视频创意制作,背景图片融合视频制作画中画效果

随着社交媒体的兴起&#xff0c;视频制作不再仅仅是专业人士的专利。每个人都可以通过一些技巧&#xff0c;创作出独特而富有吸引力的视频内容。视频剪辑是一种非常重要的技术&#xff0c;它能让视频从平淡无奇变为生动有趣。背景图片融合视频制作画中画效果&#xff0c;也能增…

APD--传感器

#1 Current temperature coeffiency Hamamastu Si APD S8664, with same bias, **low temperature**, **higher gain**, it means that **higher current output**. #2, PD

市场全局复盘 20231211

昨日回顾&#xff1a; SELECT TOP 10000 CODE,成交额排名,净流入排名,代码,名称,DDE大单金额,涨幅,所属行业,主力净额,DDE大单净量,CONVERT(DATETIME, 最后涨停时间, 120) AS 最后涨停时间 FROM dbo.全部&#xff21;股20231208_ALL WHERE 连板天 > 1AND DDE大单净量 > …

C#科学绘图之scottPlot绘制多个图像

文章目录 示例移除图像图例信号图 scott系列&#xff1a;绘图初步 示例 从名字就能看出&#xff0c;ScottPlot的绘图函数AddScatter的作用是为图窗添加数据点&#xff0c;换言之&#xff0c;每调用一次AddScatter&#xff0c;就可以在图窗中添加一组图像。下面添加两个按钮&a…

Java最全面试题专题---2、Java集合容器(1)

集合容器概述 什么是集合 **集合框架&#xff1a;**用于存储数据的容器。 集合框架是为表示和操作集合而规定的一种统一的标准的体系结构。 任何集合框架都包含三大块内容&#xff1a;对外的接口、接口的实现和对集合运算的算法。 **接口&#xff1a;**表示集合的抽象数据类…

文件扩展名修改:txt文本如何批量修改为word文档格式,高效修改一步到位

在日常工作中&#xff0c;经常要处理各种类型的文本文件&#xff0c;其中txt文件和Word文档是最为常见的两种格式。有时候&#xff0c;要将大量的txt文件修改为Word文档格式&#xff0c;以便在Microsoft Word中打开、编辑和排版。虽然可以手动将txt文件重命名为.docx格式&#…

InsCode实践分享:如何实现自动化代码审查和质量控制?

文章目录 文章目录 概要 整体架构流程 InsCode的解释 技术展示 小结 概要 InsCode是一款面向中小型企业的代码审查和自动化质量控制工具。本文将分享如何使用InsCode来实现自动化代码审查和质量控制&#xff0c;帮助企业在代码开发和维护过程中降低风险&#xff0c;提高效率和…

Volatility3内存取证工具安装及入门在Linux下的安装教程

1-1. Volatility3简介 Volatility 是一个完全开源的工具&#xff0c;用于从内存 (RAM) 样本中提取数字工件。支持Windows&#xff0c;Linux&#xff0c;MaC&#xff0c;Android等多类型操作系统系统的内存取证。 针对竞赛这块&#xff08;CTF、技能大赛等&#xff09;基本上都…

PP和PVC可以相互粘接吗?

PP&#xff08;聚丙烯&#xff09;和PVC&#xff08;聚氯乙烯&#xff09;是两种不同类型的塑料&#xff0c;它们的化学性质和表面特性不同&#xff0c;因此直接的粘接会比较困难。这是因为它们的分子结构和化学成分不太相容&#xff0c;不易产生牢固的粘接。通常情况&#xff…