uniapp 弹出层

<template>
  <view>
    <button @click="showModal">打开弹出层</button>
    <view v-if="modalVisible" class="modal-container">
      <view class="modal-content">
        <!-- 这里放你的弹出层内容 -->
        <button @click="closeModal">关闭弹出层</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
    };
  },
  methods: {
    showModal() {
      this.modalVisible = true;
    },
    closeModal() {
      this.modalVisible = false;
    },
  },
};
</script>

<style>
.modal-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 999;
}

.modal-content {
  width: 100%;
  background: #fff;
  padding: 20rpx;
}
</style>