脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序自定义遮罩层

微信小程序实现一个自定义遮罩层效果

 更新时间：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中实现链式调用的实现

    在JavaScript中实现链式调用的实现

    这篇文章主要介绍了在JavaScript中实现链式调用的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 打印Proxy对象和ref对象的包实现详解

    打印Proxy对象和ref对象的包实现详解

    这篇文章主要为大家介绍了打印Proxy对象和ref对象的包实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • js获取iframe中的window对象的实现方法

    js获取iframe中的window对象的实现方法

    下面小编就为大家带来一篇JS获得iframe中的window对象的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript如何将后端获取到的byte数组转为文件

    JavaScript如何将后端获取到的byte数组转为文件

    这篇文章主要给大家介绍了关于JavaScript如何将后端获取到的byte数组转为文件的相关资料,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-04-04
  • TypeScript泛型约束条件示例详解

    TypeScript泛型约束条件示例详解

    有了泛型之后一个函数或容器类能处理的类型一下子扩到了无限大,似乎有点失控的感觉,所以这里又产生了一个约束的概念,下面这篇文章主要给大家介绍了关于TypeScript泛型约束条件的相关资料,需要的朋友可以参考下
    2022-04-04
  • JavaScript数值千分位格式化的两种简单实现方法

    JavaScript数值千分位格式化的两种简单实现方法

    下面小编就为大家带来一篇JavaScript数值千分位格式化的两种简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 你必须了解的JavaScript中的属性描述对象详解(上)

    你必须了解的JavaScript中的属性描述对象详解(上)

    JavaScript提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象，需要的可以参考一下
    2022-12-12
  • JS正则表达式封装与使用操作示例

    JS正则表达式封装与使用操作示例

    这篇文章主要介绍了JS正则表达式封装与使用操作,涉及javascript使用正则表达式针对邮箱、手机号、身份证、用户名、中文等简单验证操作技巧,需要的朋友可以参考下
    2019-05-05
  • 手机Web APP如何实现分享多平台功能

    手机Web APP如何实现分享多平台功能

    这篇文章主要介绍了手机Web APP如何实现分享多平台功能的相关资料,需要的朋友可以参考下
    2016-08-08
  • 简单谈谈JS数组中的indexOf方法

    简单谈谈JS数组中的indexOf方法

    最近在工作中遇到一个小问题，这篇文章代码我会简化成小例子展示给大家。给大家详细的介绍JS数组中的indexOf方法，用心看到最后会有收获哈，有需要的朋友们下面来一起看看吧。
    2016-10-10

最新评论