效果图

点击按钮后：

代码 :

maskDemo.wxml

<button bindtap='showRule' style="width:65vw" class="receiveFile">点击弹窗模态框</button>
<!--遮罩层-->
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}"><view class='ruleZhezhaoContent'><image class="dowicon" src="/images/receive_download.png"></image><input class="inputcode" type="text" placeholder="请输入收件码" bindinput='bindCode'/>  <button class="open" style="width:54vw;height:12vw;">打开</button><image src='/images/closeicon.png' class='ruleHide' bindtap='hideRule'></image></view></view>

maskDemo.wxss

.receiveFile {margin-top: 20rpx;border-radius: 20px;background: #fff;color: #175acb;border: 2rpx solid #175acb;
}
.dowicon{width: 68px;height: 68px;margin-top: 50px;margin:20px 117px 0px 122px;text-align: center;
}
.inputcode{padding-left: 20rpx;height: 40px;width: 78%;color: #000;font-weight: normal;background-color: #F6F6FF;border: 1px solid rgb(231, 230, 230) ;margin: 17px ;
}
.open{background-color: #888888;border-radius: 30px;font-weight: normal;color: #fff;margin-bottom: 50px;margin: 10px 10px 10px 10px ;
}
.ruleHide{height: 60rpx!important;width: 60rpx!important;position: absolute;top: 10rpx;right: 10rpx;
}
.isRuleShow{display: block;
}
.isRuleHide{display: none;
}
.ruleZhezhao{height: 100%;width: 100%;position: fixed;border: 1px solid springgreen;background-color:rgba(0, 0, 0, .5); top: 0;left: 0;z-index: 999;
}
.ruleZhezhaoContent{padding: 56rpx 0px;width: 80%;background: #fff;margin: 20% auto;border-radius: 20rpx;display: flex;flex-direction: column;justify-content: space-around;align-items: center;position: relative;
}

maskDemo.js

// pages/maskDemo/maskDemo.js
Page({/*** 页面的初始数据*/data:{showView: true},//打开规则提示showRule: function () {this.setData({isRuleTrue: true})},//关闭规则提示hideRule: function () {this.setData({isRuleTrue: false})},onLoad: function (options) {},onReady: function () {},onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求

微信小程序弹窗(模态框)遮罩层弹窗右上角按钮关闭相关推荐

微信小程序 - 解决弹框遮罩层的滚动穿透问题
在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动.面对这个bug,我们可以用下面几种方法实现: 方法1:catchtouchmove="true" 可 ...
微信小程序自定义模态框，官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本提示:文章最后有源码,可自取文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方提示: ...
[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bi ...
微信小程序自定义模态框
效果展示可在模态框中添加图片输入框代码展示-wxml <button class="show-btn" bindtap="showDialogBtn" ...
微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动
前言底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
微信小程序页面滚动条穿透遮罩层解决方案
假设你在遮罩层中写了一个pop窗可以通过中断捕获阶段和取消冒泡阶段capture-catch控制手指触摸后移动 capture-catch:touchmove 例子 // 底部的内容盒子 <d ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列（10）
使用wx:if进行视图层的条件渲染示例: wxml:使用view  <button bindtap="EventHandle" ...
android 遮罩使底层无法点击,小程序防止点击遮罩层后遮罩层下面也反应（有点击事件）...
小程序防止点击遮罩层后遮罩层下面也反应(有点击事件) 发布时间:2018-08-11 00:02, 浏览次数:1008 最近在做自定义弹窗,不免会使用到遮罩层或者说蒙层. 但是关键是,有遮罩层后,再点 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...

微信小程序弹窗(模态框)遮罩层弹窗右上角按钮关闭

微信小程序点击按钮/view出现弹窗带遮罩层可关闭

效果图

点击按钮后：

代码 :

maskDemo.wxml

maskDemo.wxss

maskDemo.js

微信小程序弹窗(模态框)遮罩层弹窗右上角按钮关闭相关推荐

最新文章

热门文章

微信小程序 弹窗(模态框)遮罩层 弹窗右上角按钮关闭

微信小程序点击按钮/view出现弹窗 带遮罩层 可关闭

效果图

点击按钮后：

代码 :

maskDemo.wxml

maskDemo.wxss

maskDemo.js

微信小程序 弹窗(模态框)遮罩层 弹窗右上角按钮关闭相关推荐

最新文章

热门文章

微信小程序弹窗(模态框)遮罩层弹窗右上角按钮关闭

微信小程序点击按钮/view出现弹窗带遮罩层可关闭

微信小程序弹窗(模态框)遮罩层弹窗右上角按钮关闭相关推荐