微信小程序模态框
WXML页面
view bindtap='showRule'>点击事件</view>
<!--遮罩层-->
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
<view class='ruleZhezhaoContent'>
<image src='https://miaodaokeji.com/Public/output/qrcode/bz0317113648.png' class="select"></image>
<image src='../../images/叉号.png' class='ruleHide' bindtap='hideRule'>
</image>
<view class="text"></view>
</view>
</view>
js逻辑层
data:{
},
//打开规则提示
showRule: function () {
this.setData({
isRuleTrue: true
})
},
//关闭规则提示
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
css样式层
.isRuleShow{
display: block;
}
.isRuleHide{
display: none;
}
.ruleZhezhao{
height: 100%;
width: 100%;
position: fixed;
background-color:rgba(0, 0, 0, .5);
top: 0;
left: 0;
z-index: 999;
}
.ruleZhezhaoContent{
padding: 40rpx 0;
/* width: 50%; */
width: 430rpx;
height: 390rpx;
background: #fff;
/* background-color: transparent; */
margin: 40% auto;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
}
.ruleHide{
height: 60rpx!important;
width: 60rpx!important;
position: absolute;
margin: 280rpx auto;
z-index: 10000;
}
.select{
/* width: 320rpx;
height: 320rpx;
margin-top: 5rpx;
margin-bottom: 30rpx; */
width: 390rpx;
height: 390rpx;
position: relative;
top: 36%;
left: 45.5%;
transform: translate(-50%, -50%);
display: block;
}
.text{
display: block;
text-align: center;
font-size: 40rpx;
font-weight:bolder;
position: relative;
top: 3%;
}
第二种
<view class="content-bot" style="border-top:1px solid #f2f2f2 ;margin-top:0vw; padding-top:3vw;">
<button bindtap="buttonTap">点击按钮</button>
<modal hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
<view>
<image class="image" src="http://miaodaokeji.com/Public/output/img/bz0315042756.png" mode='aspectFill'></image>
</view>
<view></view>
<view></view>这是用来换行的
<view></view>
</modal>
js逻辑层
data: {
modalHidden: true
},
/**
* 显示弹窗
*/
buttonTap: function () {
this.setData({
modalHidden: false
})
},
/**
* 点击取消
*/
modalCandel: function () {
// do something
this.setData({
modalHidden: true
})
},
/**
* 点击确认
*/
modalConfirm: function () {
// do something
this.setData({
modalHidden: true
})
},
Css
page{
background-color: #EEEEEE;
}
.content{
border-radius: 1vw;
background-color: white;
width: 92vw;
margin: 3.5vw auto;
padding:2vw 3.5vw ;
box-sizing: border-box;
font-size: 4vw;
}
.contentBox{
font-size: 3.3vw;
padding-bottom:3vw ;
}
.contentText{
display: flex;
justify-content:space-between;
padding: 2vw 0;
box-sizing: border-box;
}
.contentFlex{
width: 50%;
}
.contentFlexUp{
color: #999;
margin-bottom: 1vw;
}
.content-bot{
margin-top: 3vw;
display: flex;
width: 100%;
justify-content:space-between;
}
.content-bot view{
height: 9vw;
line-height: 9vw;
color: white;
width: 22vw;
border-radius: 0.6vw;
margin-left: 5vw;
text-align: center;
font-size: 3.5vw;
}
.text{
width: 100vw;
padding:5vw;
text-align: center;
box-sizing: border-box;
font-size: 3vw;
}
.but{
margin:6vw auto 3vw;
color: white;
background-color: rgb(55, 134, 236);
text-align: center;
line-height: 13vw;
height: 13vw;
width: 92vw;
border-radius: 0.8vw;
font-size: 5vw;
}
.but:hover{
background-color: rgba(55, 134, 236,0.7);
}
.phone{
display: flex;
justify-content: space-around;
align-items: center;
width: 92vw;
font-size:3.4vw;
color:#666;
height: 3.4vw;
margin-left: 4vw;
margin-bottom: 4vw;
text-align: center;
}
.phone view{
height: 1px;
width: 22%;
margin-top: 2.3vw;
background-color: #ddd;
}
/* button{
height: 7vw;
width: 28vw;
border-radius: 0.6vw;
margin-left: 3vw;
font-size: 3.5vw;
text-align: center;
line-height: 7vw;
display: flex;
justify-items: flex-start;
align-items: flex-end;
} */
button{
height: 9vw;
line-height: 9vw;
color: black;
width: 28vw;
border-radius: 0.6vw;
margin-left: 0vw;
text-align: center;
font-size: 3.5vw;
}
.image {
width: 300rpx;
height: 300rpx;
position: relative;
top: 200%;
left: 145%;
transform: translate(-50%, -50%);
/* margin: auto; */
}
