默认情况下<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>
应用程序首页.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>并设计它的风格。什么都没起作用。
请帮忙。
