微信小程序一些常用代码（2）——modal

今天在开发过程中需要实现一个弹出输入框的效果，偶然见到网友分享的代码感觉非常不错，特此记之并学习。

 首先放上实现的效果图：点击页面一中的“加号”，实现页面二中的效果图。

js文件：

// pages/modal/modal.jsPage({  data: {    'modal_visiable': false,     'text': '',    'delete_button_visiable': false,//modal中的删除按钮是否可见  },  blank_modal: function () {    this.setData({      'modal_visiable': true,      'text': '',      'delete_button_visiable': true    })  },  cancle: function () {    this.setData({        'modal_visiable': false    })  },  input: function (e) {    this.setData({      'text': e.detail['value']    })    console.log(this.data.text)  },})

wxml文件：

<!--pages/modal/modal.wxml--><image src="/images/add-button.svg" class="add-button" bindtap="blank_modal" style="height:200rpx"></image><view class="cover" wx:if="{{modal_visiable}}" bindtap="cancle"></view><view class="modal ripple bounceInDown" wx:if="{{modal_visiable}}">    <view class="create-box">        <image src="/images/close-button.svg" class="close-button" bindtap="cancle"></image>        <block wx:if="{{ is_newbee }}">            <textarea placeholder="选择表达今天心情的emoji, 或者在此写点文字, enjoy ~ ~" value="{{ text }}" bindinput="input"  placeholder-style="color:#9B9B9B;font-size:26rpx;line-height:46rpx" class="text"/>        </block>        <block wx:else>            <textarea placeholder="写点什么,当然你也可以什么都不写" value="{{ text }}" bindinput="input"  placeholder-style="color:#9B9B9B;font-size:26rpx;" class="text"/>        </block>        <view class="button-box">            <block wx:if="{{ delete_button_visiable}}">                <view class="delete-button" bindtap="delete" style="visibility: show">删除</view>            </block>            <block wx:else>                <view class="delete-button" bindtap="delete" style="visibility: hidden">删除</view>            </block>            <view class="submit-button" bindtap="save">保存</view>        </view>    </view></view>

wxss文件：

/* pages/modal/modal.wxss *//*添加按钮*/.add-button {    position: fixed;    top: 90%;    left: 600rpx;    height: 100rpx;    width: 100rpx;}.container {    display: flex;    flex-direction: column;    /*background-color: black;*/    /*opacity: 0.1;*/}/*蒙层*/.cover {    height: 3000rpx;    width: 100%;    position: fixed;    left: 0;    top: 0;    background-color: #000000;    opacity: 0.5;}.modal {    height: 750rpx;    width: 750rpx;    position: fixed;    top: 10%;    left: 0;    z-index: 100;    /*background-color: black;*/    /*padding: 20rpx;*/}.modal .create-box {    margin: 20rpx;    padding: 80rpx;    /*background-color: #29DDB9;*/    background-color: #FFFFFF;    /*border: 4rpx solid #29DDB9;*/    border-radius: 10rpx;    display: flex;    flex-direction: column;    align-items: center;}.create-box .close-button {    height:60rpx;    width:60rpx;    margin-top:-60rpx;    margin-right:-60rpx;    align-self: flex-end;}.modal .create-box .text {    width:100%;    height:200rpx;    display:block;    position:relative;    margin-top:80rpx;    background-color:#FDFDFD;    padding: 20rpx;}.modal .create-box .button-box {    width: 100%;    margin-top: 80rpx;    display: flex;    flex-direction: row;    justify-content: space-between;}.button-box .submit-button {    background-color: #29DDB9;    width: 100rpx;    padding: 20rpx;    color: #FFFFFF;    text-align: center;    border-radius: 10rpx;}.button-box .delete-button {    background-color: #9B9B9B;    width: 100rpx;    padding: 20rpx;    color: #FFFFFF;    text-align: center;    border-radius: 10rpx;}