自定义小程序模态对话框

最近做项目发现程序的wx.showModal 模态对话框真机有时候无法弹出的情况，于是就自己写了一个，很灵活，按钮个数和输入框随需求改变。下面是预览图 1563847238.jpg

<view class='cover'>
  <view class='cover_child '>
    <view class='cover_title cover_auto'>我是标题</view>
    <view class='cover_count cover_auto'>我是内容我是内容我是内内容我是内容我是内容我是内容</view>
    <input placeholder='请输入...........' class='cover_ipt cover_auto'></input>
    <view class='cover_btn_bx'>
       <view class='cover_btn_off cover_btn'>取消</view>
       <view class='cover_btn_ok cover_btn'>确定</view>
    </view>
  </view>
</view>

/* 自定义弹窗 start */

.cover {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.cover_child {
  border-radius: 8rpx;
  background: #fff;
  box-sizing: border-box;
  min-width: 600rpx;
  max-width: 700rpx;
}

.cover_auto {
  width: 90%;
  margin: 0 auto;
}

.cover_title {
  text-align: center;
  font-size: 35rpx;
  padding: 30rpx;
}

.cover_count {
  font-size: 28rpx;
  text-align: center;
}

.cover_ipt {
  font-size: 28rpx;
  text-align: center;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  width: 400rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  height: 70rpx;
  padding-top: 0rpx;
  box-sizing: border-box;
}

.cover_btn_bx {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 28rpx;
  border-top: 1rpx solid #eee;
  margin-top: 30rpx;
}

.cover_btn {
  flex: 1;
  padding: 25rpx 0;
  border-right: 1rpx solid #eee;
}
.cover_btn:last-child{
  border-right: none;
}
.cover_btn_off {
  color: #000;
}

.cover_btn_ok {
  color: rgb(17, 39, 236);
}
/* 自定义弹窗 end */