使用uniapp写一个页面中间的弹窗

用uniapp写一个页面中间的弹窗

---

实现方式

这个弹出层动画中，我们使用了一个 popup-container 元素作为弹窗的容器。这个元素默认是隐藏的，只有当用户点击弹出层的按钮时才会从中间弹出。

同时，我们还使用了一个遮罩层 mask 来遮挡页面，使用户无法进行其他操作。当弹出层关闭时，遮罩层也会自动关闭。

代码示例

<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>

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果教程中有不懂的地方，可添加学习会员小助手咨询（微信：mifankeji77）