微信小程序自定义底部弹窗

效果图

HTML

<view bindtap="clickme">点击我可以看到底部弹框的出现</view>  
 
<!--屏幕背景变暗的背景  -->
  <view class="commodity_screen" bindtap="hideModal" wx:if="{
  {showModalStatus}}"></view>
  <!--弹出框  -->
  <view animation="{
  {animationData}}" class="commodity_attr_box" wx:if="{
  {showModalStatus}}">在这里写弹出框里面的布局</view>

CSS

/*使屏幕变暗  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  o