bootstrap设置模态框高度_微信小程序自定义弹窗(模态框)

看了微信原生的api发现模态框的样式满足不了需求.

效果图是这样的

弹窗的演示

但是实际上微信提供的模态框是矩形,这是一张模态框的背景图,然后再里面写样式,最后的效果大概是这样.

效果图

想直接写出这样的样式最开始没有思路,我想了一会儿因为那是张背景图,所以我只要写出一个这样形状的模态框就行了,背景图一加上就没有问题.图片在本地暂时用不了,我就写出来了大概的样式.

将背景图替换进去就可以达到效果

模态框直接弹出来可能比较生硬,于是加了动画进去.

下面贴代码:

wxss

.btn {  
  width: 80%;  
  padding: 20rpx 0;  
  border-radius: 10rpx;  
  text-align: center;  
  margin: 40rpx 10%;  
  background: #000;  
  color: #fff;  
}  
  
/*mask*/  
.drawer_screen {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  top: 0;  
  left: 0;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
}  
  
/*content*/  
/* 模态框 */
.drawer_box {  
  width: 650rpx;  
  height: 400rpx;
  /* overflow: hidden;   */
  position: fixed;  
  top: 50%;  
  left: 0;  
  z-index: 1001;  
  background: #FFFFFF;  
  /* background-image: url("http://weixin.siyanli.net.cn/static/miniimg/guize-01.png"); */
  margin: -150px 50rpx 0 50rpx;  
  border-radius: 3px;  
}  
/* //圆 */
 .circle {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      background: #fff;
      -moz-border-radius: 60px;
      -webkit-border-radius: 60px;
      border-radius: 50px;
      position: absolute;
      top: -100rpx;
      left: 235rpx;
 }

js:

Page({
  data: {
    showModalStatus: false
  },
  powerDrawer: function (e) {
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function (currentStatu) {
    /* 动画部分 */
    // 第1步：创建动画实例   
    var animation = wx.createAnimation({
      duration: 200,  //动画时长  
      timingFunction: "linear", //线性  
      delay: 0  //0则不延迟  
    });
    // 第2步：这个动画实例赋给当前的动画实例  
    this.animation = animation;
    // 第3步：执行第一组动画  
    animation.opacity(0).rotateX(-100).step();
    // 第4步：导出动画对象赋给数据对象储存  
    this.setData({
      animationData: animation.export()
    })
    // 第5步：设置定时器到指定时候后，执行第二组动画  
    setTimeout(function () {
      // 执行第二组动画  
      animation.opacity(1).rotateX(0).step();
      // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象  
      this.setData({
        animationData: animation
      })
      //关闭  
      if (currentStatu == "close") {
        this.setData(
          {
            showModalStatus: false
          }
        );
      }
    }.bind(this), 200)

    // 显示  
    if (currentStatu == "open") {
      this.setData(
        {
          showModalStatus: true
        }
      );
    }
  }
})  

wxml:

<view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>  
<!--content-->  
<!--使用animation属性指定需要执行的动画-->  
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  
  <!--drawer content-->
  <view class="circle"></view>  
  <view class="drawer_content">       
  </view>
</view>