<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>
.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;
}
data:{
showView: true
},
//打开规则提示
showRule: function () {
this.setData({
isRuleTrue: true
})
},
//关闭规则提示
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
标签：遮罩,width,右上角,margin,color,background,border,弹窗 From： https://www.cnblogs.com/wencaiguagua/p/16858724.html