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

?

1 2 3 4 5 6 7 8 9 10

<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>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

.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; }

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

data:{     showView: true     },      //打开规则提示       showRule: function () {         this.setData({           isRuleTrue: true         })       },       //关闭规则提示       hideRule: function () {         this.setData({           isRuleTrue: false         })       },

　　

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/wencaiguagua/p/16858724.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！