微信小程序，确认弹窗

 html

<!--packageA/pages/set/set.wxml-->
<view class="main">
  <navigation-barMy default-data="{{defaultData}}"></navigation-barMy>
  
  <view class="mainBody">
    <view class="headerBox"></view>
    <view class="itemBox" bind:tap="showPopup">
      退出登录
    </view>
  </view>
  <!-- 遮罩层 -->
  <view class="overlay" wx:if="{{isPopupVisible}}" bindtap="hidePopup"></view>
  <!-- 弹窗 -->
  <view class="popup1" wx:if="{{isPopupVisible}}">
    <view class="popup">
      <!-- 弹窗头部 -->
      <view class="popup-header">
        退出登录
      </view>
      <!-- 弹窗内容 -->
      <view class="popup-content">
        你确定退出？
      </view>
      <view class="popup-footer">
        <view class="close" bind:tap="hidePopup">取消</view>
        <button class="goTo" bind:tap="getArticleDetails">确认</button>
      </view>
    </view>
  </view>
</view>

js 

var ports = require("../../../utils/ports.js")
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    defaultData: {
      title: "设置", // 导航栏标题
      arrow: true, //是否显示返回箭头
    },
    isShow: false, //是否禁用
    isPopupVisible: false, // 控制弹窗显示与隐藏的状态
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if (wx.getStorageSync('USER_SESSIONID')) {
      this.setData({
        isShow: true,
      })
    } else {
      this.setData({
        isShow: false,
      })
    }
  },
  // 退出登录
  loginOut() {
    const that = this
    退出api({
      sessionID: wx.getStorageSync('USER_SESSIONID'),
    }, that, res => {
      if (res.data.header.code == 0) {
        wx.removeStorageSync('USER_SESSIONID')
        wx.removeStorageSync('USER_MEMBERID')
        wx.removeStorageSync('USER_MEMBER')
        wx.removeStorageSync('USER_OPENID')
        wx.removeStorageSync('USER_PHONE')
        wx.navigateTo({
          url: '/pages/mine/mine',//跳转到指定页面
        })
      }
    })
  },
  // 显示弹窗  
  showPopup: function () {
    console.log('isShow',this.data.isShow);
    if (!this.data.isShow) {
      return
    }
    this.setData({
      isPopupVisible: true, 
    })
  },

  // 隐藏弹窗  
  hidePopup: function () {
    this.setData({
      isPopupVisible: false,
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

css 

.main{
  width: 100%;
}
.mainBody{
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  padding: 16rpx 25rpx;
  box-sizing: border-box;
}
.headerBox{
  width: 100%;
  height: 150rpx;
}
.itemBox{
  width: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 15rpx;
  font-size: 28rpx;
}
.overlay {  
  /* 遮罩层样式 */  
  position: fixed;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */  
  z-index: 999; /* 确保遮罩层在弹窗下面 */  
}  
  
.popup1 {  
  /* 弹窗基础样式 */  
  position: fixed;  
  right: 50%;  
  top: 50%;  
  transform: translate(50%,-50%);
  width: 620rpx;
  height: 750rpx; 
  z-index: 1000; /* 确保弹窗在最上层 */  
}
.popup {  
  /* 弹窗基础样式 */  
  position: absolute;  
  right: 50%;  
  top: 50%;  
  transform: translate(50%,-50%);
  width: 620rpx;
  background-color: #fff;  
  box-shadow: 0rpx 14rpx 12rpx 4rpx rgba(93,93,93,0.09);
  border-radius: 23rpx; 
  padding: 25rpx;
  box-sizing: border-box;
}
.shieldIcon{
  width: 312rpx;
  height: 197rpx;
  position: absolute;
  left: 50%;
  top: -57rpx;
  transform: translateX(-50%);
}
  
.popup-header{
  width: 100%;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 40rpx;
  color: #000000;
  text-align: center;
}
.popup-content {  
  /* 弹窗内容样式 */  
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #333333;
  text-align: center;
}
.popup-footer{
  position: absolute;
  left: 0;
  bottom: 25rpx;
  width: 100%;
  height: 68rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.close{
  width: 203rpx;
  height: 69rpx;
  border-radius: 34rpx;
  border: 1px solid #999999;
  text-align: center;
  line-height: 68rpx;
  box-sizing: border-box;
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #999999;
}
.goTo{
  width: 202rpx;
  height: 68rpx;
  background: linear-gradient(107.02deg, #015EEA 0%, #00C0FA 100%);
  border-radius: 34rpx;
  opacity: 0.8;
  text-align: center;
  line-height: 68rpx;
  box-sizing: border-box;
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 30rpx;
  color: #FFFFFF;
}
button{
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

 JSON

{
  "enablePullDownRefresh": false,
  "navigationBarTextStyle": "black",
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "navigation-barMy": "/components/navigation-barMy/navigation-barMy"
  }
}