微信小程序实现一个自定义遮罩层效果
更新时间：2023年09月08日 09:40:37 作者：与f
这篇文章主要介绍了微信小程序实现一个自定义遮罩层,大概效果是点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
正文：
先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层;
<button bindtap="showview">Show</button>
<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<view class="show" bindtap='hideview' style='display:{{display}}'>申请成功
<view class='txt'>您的密码为:123456</view>
</view>.bg {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}
.show {
display: none;
text-align: center;
position: absolute;
top: 45%;
left: 20%;
width: 53%;
height: 10%;
padding: 8px;
border: 8px solid #e8e9f7;
background-color: white;
z-index: 1002;
overflow: auto;
}
.txt{
margin-top: 20rpx;
font-size: 28rpx;
color: royalblue
}Page({
data: {
display:''
},
showview: function() {
this.setData({
display: "block"
})
},
hideview: function() {
this.setData({
display: "none"
})
}
})到此这篇关于微信小程序实现一个自定义遮罩层的文章就介绍到这了,更多相关小程序自定义遮罩层内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了javascript正则表达配置扩展名并实现验证，文章围绕主题展开相关资料，具有以得参考价值，需要的小伙伴可以参考一下2022-02-02
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
今天小编就为大家分享一篇layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了前端中骨架屏的三种运用方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2025-05-05
JavaScript结合xlsx.js实现excel数据导出导入功能
在做后端开发管理实际业务开发中,有时会遇到处理导入、导出Excel文件的数据,本文主要为大家详细介绍了JS如何使用xlsx.js实现这一功能,下面小编就和大家简单介绍一下吧2026-02-02
在JavaScript中,处理时间和日期是常见任务之一,涉及到从用户界面的日期选择器到服务器上的时间戳,再到时间间隔的计算,本文将深入探讨JavaScript中的时间处理,需要的朋友可以参考下2023-09-09
本文主要分享了原生js开发的日历插件的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
MQTT是轻量级发布/订阅协议,专为物联网等低带宽场景设计,支持QoS分级、遗嘱消息等特性,本文通过JavaScript库实现客户端,涵盖连接管理、消息处理及优化方案,适用于实时通信应用开发,本文给大家介绍基于JavaScript的MQTT实时通信应用开发,感兴趣的朋友一起看看吧2025-09-09
这篇文章主要介绍了基于VSCode调试网页JavaScript代码过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了微信小程序连接服务器展示MQTT数据信息的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了js实现文本框输入文字个数限制代码，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，如何限制，请看本文2015-12-12
最新评论