bootstrap-vue 改变 <b-modal> 的位置答案

【问题标题】：bootstrap-vue change the position of <b-modal>bootstrap-vue 改变 <b-modal> 的位置
【发布时间】：2018-10-04 00:23:37
【问题描述】：

默认情况下<b-modal> 显示在页面顶部。当属性centered 添加到标签时。它居中。

但是，我想在页面顶部下方显示具有一定间隙的模式。
打开主页时会显示模态框。

AppModal.vue

<template>
<b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close>
    //...
</b-modal>
</template>
<script>
export default {
  data () {
    return {
      mymodal: ['mymodal']
    }
  },
  methods: {
    hideModal () {
      this.$refs.thisModalRef.hide()
    },
    showModal () {
      this.$refs.thisModalRef.show()
    }
  }
}
</script>

<style scoped>
  .mymodal > div {
    position: absolute;
    top: 300px;
    right: 100px;
    background-color: yellow;
  }
</style>

AppHome.vue

<template>
  <div>
    // omitted
    <AppModal ref="modalRef"></AppModal>
  </div>
</template>

<script>
import AppModal from './AppModal'

export default {
  components: {
    AppModal
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    showModal: function () {
      this.$refs.modalRef.showModal()
    }
  },
  mounted () {
    this.showModal()
  }
}
</script>

<style scoped>
// ommitted
</style>

modal相关的html源码

<div id="__BVID__16___BV_modal_outer_">
   <div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;">
      <div class="modal-dialog modal-lg">
         <div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content">
            <!---->
            <div id="__BVID__16___BV_modal_body_" class="modal-body">
               // ommitted
            </div>
            <!---->
         </div>
      </div>
   </div>
   <div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div>
</div>

如您所见，mymodal 类已正确应用。但是 div .modal-dialog 没有我给它的 css 属性。

开发工具中真正的 CSS 属性

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

我尝试向<b-modal> 添加一个自定义类并设置它的样式。没有任何效果。请帮忙。

【问题讨论】：

@Sphinx 谢谢你，但它仍然无法正常工作。

标签： css vue.js vuejs2 bootstrap-vue

【解决方案1】：

如果你想把模态框放到特定的位置，下面是我的解决方案：

通过其 props=modal-class 将特定类添加到 <b-modal>
然后将您的样式添加到myclass > div

您可以查看the github (line#:176)，Bootstrap-vue 会将一个div.modal-content（包括 header/body/foot）放入一个 div 中，其中 class="modal-dialog" 是 root 的直接子级。

这就是为什么上述解决方案使用 css 选择器 = .myclass > div。

如果您查看 dom 树：一个 bootstrap-vue 模态的结构将是：

一个根 div (myclass 将被添加到这里) -> 一个带有 modal-dialog 的 div -> 一个带有 modal-content 的 div -> header/body/footer

以下是一个示例：（我为 modal-dialog 和 modal-content 设置了不同的背景颜色。）

app = new Vue({ //not vue, it is Vue
  el: "#app",
  data: {
    myclass: ['myclass']
  },
  methods: {
    showModal: function(){
      this.$refs.myModalRef.show()
    }
  }
})

.myclass > div {
  position:absolute !important;
  top: -10px !important;
  left: -10px !important;
  background-color:yellow !important;
}

.myclass > .modal-dialog > .modal-content {
  background-color:red !important;
}

<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
    <b-button @click="showModal">
      Open Modal
    </b-button>
  <b-modal ref="myModalRef" :modal-class="myclass" size="lg">
      <h2>Test</h2>
  </b-modal>
</div>

【讨论】：

谢谢，+1。我可以看到你的作品。它仍然无法解决我的问题。我的设置略有不同。我的<b-modal> 包装在一个<AppModal> 组件中，该组件用于另一个组件。 myclass 正确附加到 <b-modal> 的根标记，但其直接子级没有样式。换句话说，myclass > div 由于某种原因无法正常工作。
@MinjunYu，<b-modal> 的父对象是什么无关紧要，可能是版本不同造成的。您可以打开您的 Web 开发人员，然后检查 dom 树中的 <b-modal>，最后应用适当的 css 选择器。或者您可以将 html 添加到问题中，我们可以从那里为您提供帮助。
@MinjunYu .myclass > .modal-dialog > .modal-content这个也不行？
不，这个也不行。我已经放了相关的html源码和vue组件。谢谢！
@MinjunYu，我看了你的html源码，和我的差不多。我可以知道你在哪里定义 css 吗？在一个全局 css 文件中或在当前视图中使用<style>?

【解决方案2】：

我用

<b-modal
    body-class="modalcart"
    ref="addToCart"
    id="addToCarModal"
    hide-footer
    hide-header
>
<b-container class="text-center modal-product-content">
  <img class="modal-image" src="~/assets/images/add-to-cart.png" alt=""/>

和：

<style lang="scss" scoped>
/deep/ .modalcart {
  font-family: 'poppins-bold';
  /deep/ .modal-product-content {
    padding: 3rem;
    margin: 0 auto !important;
    /deep/ .modal-image {
      height: 150px;
      margin-bottom: 2rem;
      }
    }
  ...
  }
  </style>

然后工作！谢谢
请记住，没有 body-class 和 /deep/ 将无法工作我使用 node-sass、vue 3、vue-loader 15

【讨论】：

【解决方案3】：

也许你可以试试margin-top: 100px。

【讨论】：

【解决方案4】：

我认为这是因为 Bootstrap 的 @media 断点。然后，在 <style> 中覆盖它。

@media (min-width: 576px) {
    .modal-dialog {
        margin: .5rem auto;
    }
}

【讨论】：