微信小程序自定义弹出框

小程序自定义弹出框

效果图

源码显示 html

js

代码 HTML文件

<!-- 弹出层 -->
<view class="Popup" catchtouchmove="preventTouchMove" wx:if="{{showModal}}">
  <form  bindsubmit="formSubmit" >
    <view style="font-size: 30rpx; font-weight: bold; line-height: 42rpx; text-align: center;padding-top: 40rpx;margin-bottom: 35rpx;">自定义金额</view>
    <input name="money"  type="text" placeholder="请输入充值金额"/>
    <view style="display: flex; justify-content: space-between; margin-top: 108rpx;">
    <button style="margin-left: 20rpx; background-color:#FFF2EB  ; color:#FF5904 ; width: 346rpx;height: 100rpx; border-radius: 16rpx;display: flex; align-items: center; justify-content: center; box-shadow: none;" bindtap="cancel" >
      <view>取消</view>
    </button>
    <button form-type="submit" style=" margin-right: 20rpx;background-color: #FF5904 ;color:#FFFFFF;box-shadow: none; width: 346rpx;height: 100rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center;">
      <view>确定</view>
    </button>
    </view>
  </form>
</view>

js文件

data: {
    showModal:false,
  },

     this.setData({showModal:false})
   },

css文件

  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:#000;
  z-index:9000;
  opacity:0.5;
}

.Popup{
  width: 100%;
  height: 510rpx;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}
 .Popup input{
  width: 660rpx;
  height: 52rpx;
  background-color:#F5F5F5 ;
  text-align: center;
  margin: auto;
  border-radius: 20rpx;
}
.Popup input::-ms-input-placeholder{text-align: center;}
.Popup input::-webkit-input-placeholder{text-align: center;}