bootstrap-vue의 위치 변경
기본적으로<b-modal>페이지 맨 위에 있는 쇼들속성 시centered태그에 추가됨.중심이다.
다만, 페이지 상단의 아래 일정한 간격을 두고 모달(모달)을 보여주고 싶다.
모달은 홈 페이지가 열리면 나타난다.
앱모달.부에를 하다
<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>
앱홈.부에를 하다
<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>
모달과 관련된 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클래스가 올바르게 적용됨.하지만 디브.modal-dialog내가 준 css 속성이 없어
개발 도구에 있는 실제 css 속성
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
사용자 지정 클래스를 에 추가하려고 시도했다.<b-modal>스타일링도 하고.아무 소용이 없었다.제발 도와주세요.
특정 위치에 모달(모달)을 배치하려면 아래는 내 해결책이다.
특정 클래스를 에 추가하다
<b-modal>그 소품으로.modal-class그런 다음 에 스타일을 추가하십시오.
myclass > div
기둡(라인#:176)을 들여다보면, 부트스트랩-뷰가 1개씩 배치된다.div.modal-content(헤더/몸/발 포함) 루트의 직접 자식인 클래스="모달-수정"과 함께 하나의 div로.
따라서 위의 솔루션이 css 선택기를 사용하는 것이다..myclass > div.
돔 트리를 들여다보면, 하나의 부트스트랩-뷰 모달의 구조는 다음과 같다.
루트 div 1개(myclass가 여기에 추가됨) -> 모달-함량이 있는 div 1개 -> 헤더/바디/풋퍼
아래 샘플은 다음과 같다: (모달-다이얼, 모달-콘텐츠를 위해 다른 배경색을 넣는다.)
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>나는 사용한다
<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>
그리고 일해! 고마워
차체 등급과 /딥/ 노드-사스, vue 3, vue-loader 15를 사용하지 않으면 작동하지 않는다는 점을 명심하십시오.
어쩌면 이런걸로 해 볼 수 있을거야.margin-top: 100px.
아무래도 그 때문에 그런 것 같다.@media부트스트랩의 중단점그럼, 안으로.<style>그냥 무시해버려
@media (min-width: 576px) {
.modal-dialog {
margin: .5rem auto;
}
}
참조URL: https://stackoverflow.com/questions/49989845/bootstrap-vue-change-the-position-of-b-modal
'programing' 카테고리의 다른 글
| 선택적 하위 구성요소 렌더 (0) | 2022.03.10 |
|---|---|
| Vue.js와 함께 dotenv를 사용하는 방법 (0) | 2022.03.10 |
| 공리에서 "이전" 콜백을 구현하는 방법 (0) | 2022.03.09 |
| 기본 반응 보기에 레이아웃 강제 적용 (0) | 2022.03.09 |
| 형식 지정 함수에 '이것'의 유형을 선언하는 것은? (0) | 2022.03.09 |