用户使用小程序时，会涉及到用户与小程序的界面交互，弹窗是必不可少的。所以，微信官方提供相应的弹窗API供开发人员使用，但在实际小程序开发过程中，微信官方提供的于实际开发的弹窗并不实用，我们需要在微信官方提供的弹窗进行扩展和延伸。那么今天来聊聊如何实现微信小程序自定义弹窗的实现，具体示例如下所示。

• wxml代码

打开顶部弹窗
打开中间弹窗
打开底部弹窗
打开左边弹窗
打开右边弹窗






《登高》


杜甫 〔唐代〕
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。


取消
确认









《登高》


杜甫 〔唐代〕
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。


取消
确认









《登高》


杜甫 〔唐代〕
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。


取消
确认








《登高》


杜甫 〔唐代〕
风急天高猿啸哀，
渚清沙白鸟飞回。
无边落木萧萧下，
不尽长江滚滚来。
万里悲秋常作客，
百年多病独登台。
艰难苦恨繁霜鬓，
潦倒新停浊酒杯。


取消
确认








《登高》


杜甫 〔唐代〕
风急天高猿啸哀，
渚清沙白鸟飞回。
无边落木萧萧下，
不尽长江滚滚来。
万里悲秋常作客，
百年多病独登台。
艰难苦恨繁霜鬓，
潦倒新停浊酒杯。


取消
确认

• wxss代码

/* 蒙层 */
.popup-box{
position: absolute;
z-index: 99;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
/* 上 */
.info-top{
position: fixed;
z-index: 999;
width: 100%;
top: 0;
background-color: white;
border-bottom-left-radius: 5rpx;
border-bottom-right-radius: 5rpx;
}
/* 中 */
.info-center{
position: fixed;
z-index: 999;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
/* 下 */
.info-bottom{
position: fixed;
z-index: 999;
width: 100%;
bottom: 0;
background-color: white;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
/* 左 */
.info-left{
position: fixed;
z-index: 999;
width: 50%;
height: 100%;
top: 0;
background-color: white;
border-top-right-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
/* 右 */
.info-right{
position: fixed;
z-index: 999;
width: 50%;
height: 100%;
right: 0;
top: 0;
background-color: white;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
}
/* 自定义内容（根据自己需求更改,可删除） */
button{
margin: 15rpx 0;
}
.row-info{
display: flex;
flex-direction: column;
align-items: center;
margin: 15rpx;
font-size: 32rpx;
}
.row-info view{
padding: 10rpx 0;
}
.row-info view:first-child{
display: flex;
flex-direction: row;
align-items: center;
}
.line{
width: 100rpx;
height: 1rpx;
}
.left-line{
background-image: linear-gradient(to left,orange,white);
}
.right-line{
background-image: linear-gradient(to right,orange,white);
}
.row-author{
font-size: 24rpx;
color: gray;
}
.row-btn{
display: flex;
flex-direction: row;
align-items: center;
border-top: 1rpx dashed #f1f1f1;
}
.row-btn view{
flex: 1;
text-align: center;
margin: 20rpx 10%;
padding: 12rpx 0;
font-size: 32rpx;
border-radius: 10rpx;
}
.left-btn{
background-color: #f1f1f1;
color: #33ccff;
}
.right-btn{
background-color: #33ccff;
color: white;
}
.fixed{
position: fixed;
bottom: 0;
width: 50%;
}

• js代码

Page({
/**
   * 页面的初始数据
   */
  data: {
showIndex:null,//打开弹窗的对应下标
    height:'',//屏幕高度
  },
// 打开弹窗
  openPopup(e){
var index = e.currentTarget.dataset.index;
this.setData({
showIndex:index
    })
  },
//关闭弹窗
  closePopup(){
this.setData({
showIndex:null
    })
  },
/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
var that = this;
// 动态获取屏幕高度
    wx.getSystemInfo({
success: (result) => {
        that.setData({
height: result.windowHeight
        });
      },
    })
  },
})

以上是小程序自定义弹窗实现的全部代码，很实用，可以供参考。