bootstrap-vue更改< b-modal>的位置 [英] bootstrap-vue change the position of <b-modal>

查看：902 发布时间：2020/9/22 22:11:27 css vue.js vuejs2 bootstrap-vue

本文介绍了bootstrap-vue更改< b-modal>的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

默认情况下，<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>

与模态相关的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>并设置其样式.没事. 请帮忙.

解决方案

如果要将模态放到特定位置，以下是我的解决方案:

通过props = modal-class

<b-modal>

然后将您的样式添加到myclass > div

您可以查看 github(line#:176)，Bootstrap-vue会将一个div.modal-content(包括标头/正文/脚)放入一个div中，其类别为root的直接子类class ="modal-dialog".

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

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

一个root div(我的类将添加到这里)->带有modal-dialog的一个div->带有modal-content的一个div-> header/body/footer

下面是一个示例:(我为模态对话框，模态内容添加了不同的背景颜色.)

 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>

By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered.

However, I would like to show the modal with a certain amount of gap under the top of the page.
The Modal is shown when the home page is opened.

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>

html source related to modal

<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>

As you can see, mymodal class is correctly applied. But the div .modal-dialog does not have the css properties I give it.

the real css properties found in dev tools

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

I tried adding a custom class to <b-modal> and style it. Nothing worked. Please help.

解决方案

If you want to put the modal into the specific position, below is my solutuon:

add specific class to <b-modal> by its props=modal-class
then add your styles into myclass > div

You can look into the github (line#:176), Bootstrap-vue will place one div.modal-content(including header/body/foot) into one div with class="modal-dialog" which is the direct child of root.

That is why above solution use the css selector = .myclass > div.

If you look into the dom tree: the structure of one bootstrap-vue modal will be:

one root div (myclass will be added into here) -> one div with modal-dialog -> one div with modal-content -> header/body/footer

Below is one sample: (I put different background-color for 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>

这篇关于bootstrap-vue更改< b-modal>的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

bootstrap-vue更改< b-modal>的位置 [英] bootstrap-vue change the position of <b-modal>

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

bootstrap-vue更改&lt; b-modal&gt;的位置 [英] bootstrap-vue change the position of &lt;b-modal&gt;

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

bootstrap-vue更改< b-modal>的位置 [英] bootstrap-vue change the position of <b-modal>

登录关闭