微信小程序点击按钮/view出现弹窗 带遮罩层 可关闭
效果图点击按钮后：代码 :maskDemo.wxmlmaskDemo.wxssmaskDemo.js效果图
点击按钮后：
代码 :
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.jsPage({/*** 页面的初始数据*/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方法，但样式比较固定，不能满足多元化需求
