小程序自定义弹框的方法

第小程序自定义弹框的方法本文实例为大家分享了小程序自定义弹框的具体代码，供大家参考，具体内容如下

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、样式设置

/*遮盖层*/

.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({

/**

*页面的初始数据

*/

data:{

showModal:false,

/**

*生命周期函数--监听页面加载

*/

onLoad:function(options){

ElasticFrameClick:function(){

this.setData({

showModal:true

})

toShowModal(e){

this.setData({

showModal:true

})

//隐藏弹框

hideModal(){

this.setData({

showModal:false

});

/**

*生命周期函数--监听页面初次渲染完成

*/

onReady:function(){

/**

*生命周期函数--监听页面显示

*/

onShow:function(){

/**

*生命周期函数--监听页面隐藏

*/

onHide:function(){

/**

*生命周期函数--监听页面卸载

*/

onUnload:function(){

/**

*页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh:function(){

/**

*页面上拉触底事件的处理函数

*/

onReachBottom:function(){

/**

*