自定义弹框

wxml

<!-- 自定义弹框 -->

<view class="Modal" hidden="{{ModalHidden}}">

  <view class="ModalShow">

    <view class="flex ModalHeader">

      <view>自定义弹框</view>

    </view>

    <view class="flex ModalBody">

      <view>内容显示1</view>

      <view>内容显示2</view>

      <view>…………</view>

    </view>

    <view class="flex ModalFooter">

      <view bindtap="cancel">取消</view>

      <view bindtap="confirm">确定</view>

    </view>

  </view>

</view>

<!-- 按钮 -->

<button type="default" bindtap="ModalTap">自定义弹框</button>

 

 

js

Page({

  // 页面的初始数据

  data: {

    ModalHidden:true  // 弹框的显示与隐藏

  },

  // 生命周期函数--监听页面加载

  onLoad: function (options) {

  },

  ModalTap:function(e){

    this.setData({

      ModalHidden:!this.data.ModalHidden

    })

  },

  // 确定

  confirm:function(e){

    this.setData({

      ModalHidden:!this.data.ModalHidden

    })

  },

  // 取消

  cancel:function(e){

    this.setData({

      ModalHidden:!this.data.ModalHidden

    })

  },

  //生命周期函数--监听页面初次渲染完成

  onReady: function () {

  },

  // 生命周期函数--监听页面显示

  onShow: function () {

  },

  // 生命周期函数--监听页面隐藏

  onHide: function () {

  },

  // 生命周期函数--监听页面卸载

  onUnload: function () {

  },

  // 页面相关事件处理函数--监听用户下拉动作

  onPullDownRefresh: function () {

  },

  // 页面上拉触底事件的处理函数

  onReachBottom: function () {

  },

  // 用户点击右上角分享

  onShareAppMessage: function () {

  }

})

 

wxss

.Modal{

  position: fixed;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

  z-index: 9999;

  display: flex;

  justify-content: center;

  align-items: center;

}

.ModalShow{

  width:80%;

  max-height:60%;

  background-color: #fff;

  border-radius: 5px;

  overflow: auto;

}

.flex {

  display: flex;

}

.ModalHeader{

  justify-content: center;

  align-items: center;

  line-height: 3;

  position: sticky;

  top: 0;

  font-weight: bolder;

  overflow:hidden;

  background: #fff;

}

.ModalBody{

  flex-direction: column;

  padding: 0 15rpx;

  line-height: 2.5;

  justify-content: center;

  overflow: auto;

}

.ModalFooter{

  border-top: 1px solid #ccc;

  justify-content: space-between;

  text-align: center;

  align-items: center;

  line-height: 3;

  position: sticky;

  bottom: 0;

  overflow:hidden;

}

.ModalFooter view{

  flex: 1;

}

.ModalFooter view:first-child{

  background: beige;

}

.ModalFooter view:last-child{

  background: rgb(63, 155, 78);

  color: #fff;

}