码迷,mamicode.com
首页 > 微信 > 详细

[微信小程序]实现一个自定义遮罩层

时间:2019-08-02 18:07:39      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:地方   ndt   ext   image   splay   style   block   text   技术   

 

正文:

先上效果图: 点击按钮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"
    })
  }
})

 

 

 

转: https://blog.csdn.net/qq_35713752/article/details/78675450

 

[微信小程序]实现一个自定义遮罩层

标签:地方   ndt   ext   image   splay   style   block   text   技术   

原文地址:https://www.cnblogs.com/fps2tao/p/11290221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!