小程序弹窗

//获取用户信息授权弹窗

 

<!--弹窗 -->

<view class="modal {{showAmountModal.showModal}}">

<view class="modal-content">

<view class="modal-line-box amount-title">

<text>温馨提示</text>

</view>

<view>点击授权获取微信头像和微信名字</view>

</view>

<button open-type="getUserInfo" type='primary' bindgetuserinfo='onGotUserInfo' class="button-color">授权</button>

</view>

<view class="mask {{showAmountModal.showMask}}"></view>

 

 

/* 弹窗 */

.modal{

position: absolute;

left: 0rpx;

top: 20%;

z-index: 200;

width:100%;

}

 

.modal-content{

width:60%;

height:300rpx;

margin:0 auto;

background:#fff;

font-size:30rpx;

font-family:"微软雅黑";

padding:20rpx;

border-radius:5px;

 

}

 

.modal-line-box{

margin: 30rpx 0rpx;

}

.modal-line-box.amount-title{

text-align: center;

font-size: 40rpx;

}

 

.mask{

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height:100%;

z-index: 100;

background:rgba(0,0,0,0.5);

}

.showMask,.showModal{

display: block;

}

.hideMask,.hideModal{

display: none;

}

.button-color{

width:30%;

margin-top:-94rpx;

height:65rpx;

display:flex;

align-items:center;

justify-content:center;

 

}

//js

showAmountModal: {

showModal: 'hideModal',

showMask: 'hideModal',

},

that.setData({

showAmountModal: {

showModal: 'showModal',

showMask: 'showMask',

}

})

that.setData({

showAmountModal: {

showModal: 'hideModal',

showMask: 'hideMask',

},

})

 

 

//选择按钮弹窗

<!--弹窗 -->

<view class="modal {{showAmountModal.showModal}}">

<view class="modal-content">

<view class="modal-line-box amount-title">

<text>温馨提示</text>

</view>

<view class='modal-mian'>请对该订单选择您的评价</view>

</view>

<view class='button_all'>

<button type='primary' size='mini' class="button-color" bindtap='good' style='margin-left:-130rpx;'>好评</button>

<button type='primary' size='mini' class="button-color" bindtap='bad' style='margin-left:130rpx;'>差评</button>

</view>

</view>

<view class="mask {{showAmountModal.showMask}}"></view>

 

 

 

/* 弹窗 */

.modal{

position: absolute;

left: 0rpx;

top: 20%;

z-index: 200;

width:100%;

}

 

.modal-content{

width:70%;

height:400rpx;

margin:0 auto;

background:#fff;

font-size:30rpx;

font-family:"微软雅黑";

padding:20rpx;

border-radius:5px;

 

}

.modal-mian{

text-align:center;

padding-top:40rpx;

 

}

 

.modal-line-box{

margin: 30rpx 0rpx;

}

.modal-line-box.amount-title{

text-align: center;

font-size: 40rpx;

}

 

.mask{

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height:100%;

z-index: 100;

background:rgba(0,0,0,0.5);

}

.showMask,.showModal{

display: block;

}

.hideMask,.hideModal{

display: none;

}

.button-color{

width:30%;

margin-top:-94rpx;

height:65rpx;

display:flex;

align-items:center;

justify-content:center;

position: absolute;

}

.button_all{

position: relative;

display:flex;

justify-content:center;

}

 

 

js

showAmountModal: {

showModal: 'hideModal',

showMask: 'hideModal',

},

 

//评价

evaluate(e) {

var that = this

console.log(e.currentTarget.dataset.dele)

that.setData({

showAmountModal: {

showModal: 'showModal',

showMask: 'showMask',

}

})

},