自定义的弹出框无法遮盖textarea文本内容 - WXOPEN Club

这是在开发者工具上展示的，自定义的弹出框可以覆盖textarea文本

__
__

__ 下面是手机上显示的，textarea文本漂浮在自定义的弹出框上，点击有文本的地方，弹出软键盘__

__
__

下面是文本的代码

<view class="weui-cells__title">您的留言</view>

<view class="weui-cells weui-cells_after-title">

<view class="weui-cell">

<view class="weui-cell__bd" style="z-index: 100">

<textarea placeholder="请输入您的留言" style="height: 5em;" value="{{ qrNote }}" bindinput="qrNoteBindinput"/>

</view>

下面是自定义弹出框的代码

<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{ showModalStatus }}"></view>

<view animation="{{ animationData }}" class="drawer_box" wx:if="{{ showModalStatus }}">

<view class="numberBody">

<label wx:for="{{ numbers }}" class="numberBox" bindtap="selectNumber" data-number="{{ item }}">

{{ item }}

</label>

</view>

<view class="letterBody">

<label wx:for="{{ Letters }}" class="letterBox" bindtap="selectLetter" data-letter="{{ item }}">

{{ item }}

</label>

</view>

下面是弹出框的js代码

powerDrawer: function (e) {

console.log(e)

let currentStatu = e.currentTarget.dataset.statu

this.util(currentStatu)

},

util: function (currentStatu) {

/* 动画部分 */

// 创建动画实例

let animation = wx.createAnimation({

duration: 200,

timingFunction: 'linear',

delay: 0

})

this.animation = animation

animation.opacity(0).rotate(0).step()

this.setData({

animationData: animation.export()

})

setTimeout(() => {

animation.opacity(1).rotateX(0).step()

this.setData({

animationData: animation

})

if (currentStatu == 'close') {

this.setData({

showModalStatus: false

})

}

}, 200)

if (currentStatu == 'open') {

this.setData({

showModalStatus: true

})

}

},

下面是css样式代码

.drawer_screen {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 1000;

background: #fff;

opacity: 0;

overflow: hidden;

}

.drawer_box {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0px;

left: 0;

z-index: 9999;

background: #999;

}

.numberBody {

margin: 0px 0px;

text-align: center;

}

.numberBox {

background-color: #fff;

display: inline-block;

border-radius: 2px;

width: 7.5%;

color: #000;

padding: 5px 0px;

margin: 0px 4px;

margin-top: 12px;

text-align: center;

font-size: 34rpx;

}

.letterBody {

margin: 0px 0px;

text-align: center;

padding-bottom: 25rpx;

}

.letterBox {

background-color: #fff;

display: inline-block;

border-radius: 2px;

color: #000;

padding: 5px 2.8%;

margin: 0px 1.2%;

margin-top: 12px;

text-align: center;

font-size: 32rpx;

}

可能有表达不清楚的地方请指出。