Use uniapp to write a pop-up window in the middle of the page

Method to realize

In this pop-up layer animation, we use an popup-containerelement as the container of the pop-up window. This element is hidden by default and will pop up from the middle only when the user clicks the button of the popup layer.

At the same time, we also use a mask layer maskto block the page so that users cannot perform other operations. When the popup layer closes, the mask layer also closes automatically.

code example

<template>
  <view class="wrap">
    <button class="btn" @click="showPopup">点击弹出层</button>
    <view class="popup-mask" v-show="popupVisible" @click="hidePopup"></view>
    <view class="popup-wrapper" v-show="popupVisible">
      <view class="popup-container">
        <view class="popup-header">
          <view class="popup-title">弹出层标题</view>
          <view class="popup-close" @click="hidePopup">x</view>
        </view>
        <view class="popup-body">
          <view>弹出层内容弹出层内容弹出层内容弹出层内容</view>
        </view>
        <view class="popup-footer">
          <button class="popup-cancel" @click="hidePopup">取消</button>
          <button class="popup-confirm" @click="hidePopup">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      popupVisible: false,
    }
  },
  methods: {
      
      
    showPopup() {
      
      
      this.popupVisible = true;
    },
    hidePopup() {
      
      
      this.popupVisible = false;
    },
  }
}
</script>

<style>
.wrap {
      
      
  text-align: center;
}
.btn {
      
      
  padding: 15rpx 30rpx;
  font-size: 16rpx;
  color: #fff;
  background-color: #409EFF;
  border-radius: 4rpx;
  cursor: pointer;
}
.popup-mask {
      
      
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.popup-wrapper {
      
      
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.popup-container {
      
      
  width: 500rpx;
  background-color: #fff;
  border-radius: 4rpx;
}
.popup-header {
      
      
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
  text-align: center;
  position: relative;
}
.popup-title {
      
      
  margin: 0;
}
.popup-close {
      
      
  position: absolute;
  top: 20rpx;
  right: 30rpx;
  font-size: 20rpx;
}
.popup-body {
      
      
  padding: 30rpx;
	height: 200rpx;
	text-align: left;
	font-size: 28rpx;
	color: #666;
}
.popup-footer {
      
      
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
}
.popup-cancel,
.popup-confirm {
      
      
  padding: 0 60rpx;
  font-size: 16rpx;
  color: #fff;
  border-radius: 4rpx;
  cursor: pointer;
}
.popup-cancel {
      
      
  background-color: #999;
  margin-right: 10rpx;
}
.popup-confirm {
      
      
  background-color: #409EFF;
}
</style>

The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.

How to obtain source code:

Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~

Member learning group: [One-to-one Q&A]

If there is anything you don’t understand in the tutorial, you can add a learning member assistant for consultation (WeChat: mifankeji77)