bootstrap-vue 改变 <b-modal> 的位置
Posted
技术标签:
【中文标题】bootstrap-vue 改变 <b-modal> 的位置【英文标题】：bootstrap-vue change the position of <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 谢谢你，但它仍然无法正常工作。 【参考方案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" />
和：
<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;
【讨论】：
以上是关于bootstrap-vue 改变 <b-modal> 的位置的主要内容，如果未能解决你的问题，请参考以下文章