微信小程序遮罩层显示

news2024/12/22 22:07:26

效果展示:

wxml页面:

<view class='modal-mask' wx:if='{{showModal}}'>
  <view class="modal-container">
    <view class='modal-content'></view>
    <view class='modal-footer' bindtap="closeImage">
        //这个/images/index/close.png的路径是关闭按钮图片,本人从阿里矢量图网站下载根据自己需求寻找,存入本地即可
      <image src="/images/index/close.png"  style="width: 80rpx; height: 80rpx;"/>
    </view>
  </view>
</view>

wxss页面:

/*遮罩层*/
.modal-mask {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

.modal-container {
  display: flex;
  flex-direction: column;
}

/*遮罩内容*/
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 450rpx;
  background-image: url(https://xxx/library/xcx_pop_img/xxx.jpg);        //图片路径,根据自己的写
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}

.modal-footer {
  height: 80rpx;
  width: 100%;
  margin-top: 80rpx;
  text-align: center;
} 

js页面:

data: {
    showModal:true,   //弹窗显示
  },
// 关闭弹窗
  closeImage:function(e) {
    this.setData({
          showModal:false
    })
  },

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

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

相关文章

MATLAB——循环语句

一、for end语句 在该语法中&#xff0c;循环变量是用于迭代的变量名&#xff0c;它会在每次循环迭代中从向量或矩阵中取出一列的值。数值向量或者矩阵则表示了循环变量可以取值的范围&#xff0c;通常根据实际需要事先给定。一旦循环变量遍历完数值向量或者矩阵中的所有值&…

【server】3、注册中心与配置中心

1、服务注册与发现 1.1、consul 1.1.1 是什么 官网&#xff1a; Consul by HashiCorp spring-cloud-consul: Spring Cloud Consul :: Spring Cloud Consul gitHub 官网 &#xff1a;GitHub - hashicorp/consul: Consul is a distributed, highly available, and data cent…

如何检查购买的Facebook账号优劣?

Facebook 是全球最受欢迎的社交网络之一,为品牌广告提供了巨大的潜力。许多公司和营销人员使用 Facebook 来推广他们的产品和服务&#xff0c;经常会购买账号。当然也分出了很多账号&#xff0c;比如个人号&#xff0c;BM号&#xff0c;广告号&#xff0c;小黑号等等。 但是,有…

一键安装部署,在 Ubuntu 服务器上快速搭建基于 Ghost CMS的网站

我们在上一篇内容中讲过&#xff0c;如何使用 Helm 在 Kubernetes 集群上安装 WordPress&#xff0c;创建高可用性网站。而这次我们将基于另一个流行的内容管理系统 Ghost CMS 在 DigitalOcean 云主机进行建站。 Ghost 也是开源的内容管理系统&#xff08;CMS&#xff09;&…

【Arduino】ESP8266开发环境配置(图文)

ESP8266与ESP32开发很类似&#xff0c;相当于是低配版本的ESP32&#xff0c;其同样具有无线网络连接能力&#xff0c;功能强大&#xff0c;而且价格比ESP32更具有优势。接下来我们就来设置一下ESP8266的开发环境。 使用Arduino开发平台软件&#xff0c;选择首选项进行设置。 h…

论文解析——Transformer 模型压缩算法研究及硬件加速器实现

作者及发刊详情 邓晗珂&#xff0c;华南理工大学 摘要 正文 实验平台 选取模型&#xff1a; T r a n s f o r m e r b a s e Transformer_{base} Transformerbase​ 训练数据集&#xff1a;WMT-2014 英语-德语翻译数据集、IWSLT-2014 英语-德语互译数据集 Transformer模…

警翼警用记录仪视频格式化后恢复方法

警翼是国内较大的一家警用记录仪厂商&#xff0c;此品牌我们恢复过很多&#xff0c;此次遇到的是一个典型的误格式化的情况&#xff0c;我们来看看误格式化后如何恢复。 故障存储: 32G卡/fat32 故障现象: 客户提供的信息是在交接设备后没有及时备份而做出了初始化设备的操…

图像信号处理器(ISP)基础算法及处理流程

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《暗光增强》 &a…

录屏软件哪个好?3款宝藏软件,分享给你

在数字化时代&#xff0c;录屏软件因其强大的功能性和实用性&#xff0c;逐渐成为工作和生活中的得力助手。然而&#xff0c;市面上的录屏软件众多&#xff0c;选择一款适合自己的录屏软件却成为了一个难题。 不同的录屏软件在功能、性能、易用性等方面都有所不同&#xff0c;…

js之模糊搜索

多的不说 少的不唠 直接上代码

2.5 C#视觉程序开发实例1----设计一个IO_Manager

2.5 C#视觉程序开发实例1----设计一个IO_Manager 第一步目标&#xff1a; 1 实现获取IO触发信号Trig0 2 能够实现程序切换 3 图像处理后能够输出一个脉冲 1 IO 引脚定义 1.1 输入信号定义 1.2 输出信号定义 2 IO时序图 2.1 触发时序 2.2 切换程序时序图 3 IO_Manager.cs …

数据库表导出到excel

数据库表导出到excel:前置知识1 ALL_TAB_COLS 数据库表导出到excel:前置知识2 Quartz基本使用 数据库表导出到excel:前置知识3 项目封装的Quartz实现动态定时任务 数据库表导出到excel:前置知识4 业务和效果 发起清单下载control层InventoryDownloadLogController /* * */ pa…

用户资料门户的构建

1. 需求背景 老的页面停止维护了,且老旧, 功能单一,且页面分散. 急需做功能集成的平台化建设原先的用户资料查询没有做权限管控, 每一次查询都会消耗我们组的人力资源. 2. 项目介绍 2.1. 项目地址 服务地址: [公司内网服务(略)] 工蜂地址: [公司内网仓库(略)] 2.2 项目的价…

女性经济崛起,天润融通用客户感知挖掘市场潜力

每逢一年一度的国际妇女节&#xff0c;“女性”话题都会被郑重地讨论。 从消费市场上来说&#xff0c;最近几年女性群体正在拥有越来越大的影响力&#xff0c;甚至出现了“她经济”这样的专属词汇在最近几年被市场反复讨论。 毫无疑问&#xff0c;女性消费群体的崛起已经成为…

揭秘品牌成功秘诀:品牌营销策略的核心要素大公开

品牌营销作为企业战略中至关重要的一环&#xff0c;其核心是建立和传播品牌的独特魅力&#xff0c;使其在消费者心目中占据重要位置。 一个成功的品牌营销策略能够提升品牌的知名度和影响力&#xff0c;带来持续的销售和忠诚客户群体。 在当今竞争激烈的市场环境中&#xff0…

Prompt的万能公式和优化技巧

文章目录 前言一、万能公式二、优化技巧1.设定角色2.设定目标和动机3.引导主观回答4.预设条件5.做强调6.思维链&#xff08;COT&#xff09;7.巧用定界符 前言 随着LLM的发展&#xff0c;能给我们带来很多方便&#xff0c;但是又引出了一个新的问题就是我们该如何使用他们&…

明星代言方式8种助力品牌占领市场-华媒舍

1. 明星代言的重要性和市场价值 明星代言是一种常见的品牌推广方式&#xff0c;通过联系知名度高的明星来推广产品或服务&#xff0c;从而提升品牌的知名度和美誉度。明星代言能够借助明星的影响力和粉丝基础&#xff0c;将品牌信息传达给更广泛的受众&#xff0c;从而提高销量…

【数据结构】建堆的时间复杂度

一.向下调整建堆 1.二叉树层数与总节点个数关系 层数一定时&#xff0c;在二叉树节点个数最大的情况下&#xff0c;二叉树为满二叉树&#xff0c;如下图所示&#xff0c;可以清晰地看到在满二叉树中第h层有2^(h-1)个节点&#xff0c;总节点N就等于一个等比数列的求和&#xf…

【Python机器学习】模型评估与改进——在模型选择中使用评估指标

我们通常希望&#xff0c;在使用GridSearchCV或cross_val_score进行模型选择时能够使用AUC等指标。scikit-learn提供了一种非常简单的实现方法&#xff0c;那就是scoring参数&#xff0c;它可以同时用于GridSearchCV和cross_val_score。你只需要提供一个字符串&#xff0c;用于…