如何在v-dialog右上角添加悬浮关闭图标

我有一个随页面加载自动打开的v-dialog，想在其右上角添加一个v-icon关闭按钮。试过创建透明div、把v-dialog放进容器等方法，都没法实现想要的布局。以下是我的代码：

父组件代码 #

<v-dialog 
        v-model="adPopup"     
        persistent
        @click:outside="closePopup" 
        max-width="700px">
          <Advertisements
          :adPopup="adPopup"
          @doNotShowValue="doNotShowVal"
          @closePopup="closePopup">
          </Advertisements>
      </v-dialog>

Advertisements.vue代码 #

<template>
            <v-card class="ad-card">
                <v-card-text class="pa-0">
                    <v-img max-width="100%" class="img-height" src="@/assets/PopUp.png">                    
                        <v-icon class="close-popup">mdi-close-circle</v-icon>
                    </v-img>
                </v-card-text>
                <v-card-actions class="card-actions">
                    <v-btn 
                    depressed
                    outlined
                    class="mr-1 mb-2 white--text ml-2" color="white" @click="closePopup(0)" style="text-transform: none;">Close</v-btn>
                        <v-checkbox
                        style="color: #ffffff; border-color: white"
                        color="white"
                        class="mt-2 ml-2 custom-checkbox"
                        v-model="doNotShow">
                        </v-checkbox>
                        <p class="mt-2 white--text">Do not ask me again</p>
                    <v-spacer></v-spacer>
                    <v-icon>    <font-awesome-icon icon="times" /></v-icon>
                    <v-btn class="mb-2 white--text view-products mr-2" color="#4D95B6" @click="closePopup(1)" style="text-transform: none;">View Products</v-btn>
                </v-card-actions>
            </v-card>    
</template>

要在v-dialog右上角放置关闭按钮，核心是利用绝对定位控制按钮位置，同时保证层级正确。按以下方式修改即可：

修改Advertisements.vue #

调整卡片布局，给v-card添加相对定位，然后插入绝对定位的关闭按钮：

<template>
  <div>
    <v-card class="ad-card position-relative">
      <!-- 右上角关闭按钮 -->
      <v-icon 
        class="close-btn" 
        @click="closePopup(0)"
        size="xl"
        color="grey darken-2"
      >
        mdi-close-circle
      </v-icon>

      <v-card-text class="pa-0">
        <v-img max-width="100%" class="img-height" src="@/assets/PopUp.png">                    
        </v-img>
      </v-card-text>
      
      <v-card-actions class="card-actions">
        <v-btn 
          depressed
          outlined
          class="mr-1 mb-2 white--text ml-2" 
          color="white" 
          @click="closePopup(0)" 
          style="text-transform: none;"
        >
          Close
        </v-btn>
        <v-checkbox
          style="color: #ffffff; border-color: white"
          color="white"
          class="mt-2 ml-2 custom-checkbox"
          v-model="doNotShow"
        >
        </v-checkbox>
        <p class="mt-2 white--text">Do not ask me again</p>
        <v-spacer></v-spacer>
        <v-btn class="mb-2 white--text view-products mr-2" color="#4D95B6" @click="closePopup(1)" style="text-transform: none;">View Products</v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<style scoped>
.ad-card {
  overflow: visible; /* 防止按钮被卡片裁剪 */
}

.close-btn {
  position: absolute;
  top: -18px;
  right: -18px;
  background-color: #fff;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  z-index: 10; /* 确保按钮在最上层，不被内容遮挡 */
}
</style>

关键说明 #

1. 给ad-card添加Vuetify内置的position-relative类，让它成为绝对定位按钮的参考容器。
2. 关闭按钮通过position: absolute定位，top和right的负值让它刚好落在卡片右上角外侧，视觉上更贴合弹窗。
3. 给按钮添加白色背景和圆角，提升辨识度；z-index:10确保按钮不会被卡片内的图片或其他元素遮挡。
4. 修正了原代码中presistent的拼写错误为persistent，避免影响弹窗的点击外部关闭逻辑。

内容的提问来源于stack exchange，提问作者Gene Lee