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

news/2024/7/20 2:28:51 标签: 微信小程序, 小程序

效果 

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.niftyadmin.cn/n/5262266.html

相关文章

(第3天)超详细 RHEL 7 安装单机 Oracle 11GR2 数据库

RHEL 7 安装单机 Oracle 11GR2 数据库(第3天) 实战第 2 天我们讲了 RHEL 6 是 Oracle 11GR2 最适配的操作系统版本,那为什么还要选择 RHEL 7 的系统来安装 Oracle 11GR2 数据库呢?随着硬件版本的升级,RHEL 6 版本将不再被支持安装,所以必须要选择 RHEL 7 操作系统,这是…

DevOps - Spug 自动化运维平台

关于Spug 官网&#xff1a;https://spug.cc/ Spug&#xff1a;麻雀&#xff0c;麻雀虽小&#xff0c;五脏俱全。 Spug是面向中小型企业设计的轻量级无Agent的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件在线上传下载、应用发布部署、在线任…

玩转大数据14:分布式计算框架的选择与比较

1. 引言 随着大数据时代的到来&#xff0c;越来越多的企业和组织需要处理海量数据。分布式计算框架提供了一种有效的方式来解决大数据处理的问题。分布式计算框架将计算任务分解成多个子任务&#xff0c;并在多个节点上并行执行&#xff0c;从而提高计算效率。 2. 分布式计算…

什么是进取型人格?

进取型人格量表&#xff0c;用于评估测试人对社会地位&#xff0c;自我价值的追求动机&#xff0c;受试人为对事业成功的追求动力&#xff0c;进取型人格通常表现为健谈&#xff0c;自信独立&#xff0c;积极向上&#xff0c;渴望成功&#xff0c;有自我定向&#xff0c;有责任…

Java-Ali图片上传实现

0.application.yml文件中编写配置 sky:alioss: endpoint: 地域节点(概览查看)access-key-id: 密钥账号access-key-secret: 密钥密码bucket-name: Bucket名称spring:servlet:multipart:max-request-size: 100MB # 最大请求文件大小,默认10MBmax-file-size: 10MB # 单个请求文件…

在vscode中,某项目明明能使用git功能,却看不到.git文件的可能原因

我发现自己属于第一种情况&#xff0c;.git文件夹&#xff08;文件夹的名字就是【.git】&#xff09;&#xff0c;通过在资源管理器去查看隐藏文件或隐藏文件夹&#xff0c;发现确实有这么个文件夹&#xff0c;但是在vscode里面&#xff0c;默认是看不到的。 以下是AI讲的内容…

网络安全事件分级指南

文章目录 一、特别重大网络安全事件符合下列情形之一的&#xff0c;为特别重大网络安全事件&#xff1a;通常情况下&#xff0c;满足下列条件之一的&#xff0c;可判别为特别重大网络安全事件&#xff1a; 二、重大网络安全事件符合下列情形之一且未达到特别重大网络安全事件的…

年度评选揭晓:Apache SeaTunnel荣获年度优秀开源技术团队殊荣

在OSCHINA平台举办的2023年度开源技术团队评选中&#xff0c;Apache SeaTunnel社区凭借其在开源领域的出色表现&#xff0c;荣获“2023年度优秀开源技术团队”奖项。 这一殊荣不仅是对Apache SeaTunnel社区在过去一年中技术贡献的认可&#xff0c;也是对其在开源社区活动运营方…