第小程序自定義彈框的方法本文實例為大家分享了小程序自定義彈框的具體代碼，供大家參考，具體內(nèi)容如下

1、頁面簡單布局

buttonbindtap='ElasticFrameClick'彈框/button

viewbindtap="hideModal"wx:if="{{showModal}}"/view

viewwx:if="{{showModal}}"

view

view添加備注/view

view

textareaplaceholder='備注'maxlength='-1'/textarea

/view

viewbindtap='hideModal'保存/view

/view

/view

2、樣式設(shè)置

/*遮蓋層*/

.modal-mask{

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

background:#000;

opacity:0.5;

overflow:hidden;

z-index:9000;

color:#fff;

/*白色背景*/

.modal-content{

position:fixed;

top:120rpx;

left:75rpx;

z-index:9500;

width:600rpx;

height:720rpx;

overflow:hidden;

background:#fff;

border-radius:20rpx;

.modal_title{

height:96rpx;

width:100%;

line-height:96rpx;

border-top-right-radius:20rpx;

border-top-left-radius:20rpx;

background-color:#5a94ff;

color:#fff;

text-align:center;

.modal_textarea{

height:395rpx;

width:calc(100%-40rpx);

margin:20rpx;

.modal_textareatextarea{

height:100%;

width:100%;

.btn{

height:70rpx;

width:390rpx;

background-color:#5a94ff;

color:#fff;

text-align:center;

line-height:70rpx;

border-radius:50rpx;

margin:0auto;

margin-top:40rpx;

}

3、js控制

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

showModal:false,

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

ElasticFrameClick:function(){

this.setData({

showModal:true

})

toShowModal(e){

this.setData({

showModal:true

})

//隱藏彈框

hideModal(){

this.setData({

showModal:false

});

/**

*生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

*/

onReady:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面顯示

*/

onShow:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面隱藏

*/

onHide:function(){

/**

*生命周期函數(shù)--監(jiān)聽頁面卸載

*/

onUnload:function(){

/**

*頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh:function(){

/**

*頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom:function(){

/**

*