Bootstrap-Vue：如何让<b-modal>顶部留间距而非置顶或居中？

我来帮你搞定这两个需求：让模态框在顶部下方保留自定义间距，同时页面加载时自动显示它。下面分步骤来实现：

一、实现页面加载时自动显示模态框 #

要让模态框在首页打开时自动弹出，我们可以借助Vue的mounted生命周期钩子——这个钩子会在组件挂载到页面后立即执行。只需要在这个钩子里面调用模态框的show()方法就行，注意要和你定义的ref对应上。

修改你的script部分：

export default {
  data() {
    return {
      // 这里放你的其他数据
    }
  },
  mounted() {
    // 页面加载完成后自动触发模态框显示
    this.$refs.thisModalRef.show()
  }
}

二、给模态框顶部添加自定义间距 #

默认的centered属性会让模态框完全居中，不符合你的需求。我们可以通过自定义CSS类来控制模态框的位置：

1. 先确保你的modal-class属性写法正确（不需要加冒号，直接写类名即可）；
2. 给这个自定义类写CSS，调整模态框对话框的顶部边距，同时保持水平居中。

首先修改模板里的b-modal标签（去掉centered属性，避免冲突）：

<b-modal 
  ref="thisModalRef" 
  modal-class="my-modal" 
  size="lg" 
  hide-header 
  hide-footer 
  no-close-on-backdrop 
  hide-header-close
>
  <!-- 你的模态框内容 -->
</b-modal>

然后添加样式（可以用scoped确保样式只作用于当前组件）：

.my-modal .modal-dialog {
  /* 这里设置你想要的顶部间距，比如10%视口高度，或者固定像素值 */
  margin-top: 10vh;
  /* 保持水平居中 */
  margin-left: auto;
  margin-right: auto;
}

你可以根据需求调整margin-top的值，比如改成80px这样的固定像素，或者15vh这样的响应式单位。

三、整合后的完整代码 #

把上面的修改整合起来，你的AppModal.vue应该是这样的：

<template>
  <b-modal 
    ref="thisModalRef" 
    modal-class="my-modal" 
    size="lg" 
    hide-header 
    hide-footer 
    no-close-on-backdrop 
    hide-header-close
  >
    <!-- 替换成你的模态框内容 -->
    <div>这是我的自定义模态框内容</div>
  </b-modal>
</template>

<script>
export default {
  data() {
    return {
      // 你的其他数据项
    }
  },
  mounted() {
    // 页面加载完成后自动显示模态框
    this.$refs.thisModalRef.show()
  }
}
</script>

<style scoped>
.my-modal .modal-dialog {
  margin-top: 10vh; /* 可根据需求调整间距大小 */
  margin-left: auto;
  margin-right: auto;
}
</style>

小提示 #

如果scoped样式不生效，可以尝试去掉scoped，或者使用深度选择器::v-deep .my-modal .modal-dialog（针对Vue2），不过通常直接用自定义类加scoped就可以正常生效。

内容的提问来源于stack exchange，提问作者Alex Minjun Yu