在 b-modal 中使用 b-overlay 时，模态主体不可见

Question

I am using Vue Bootstrap and when I add b-overlay with no-wrap prop in b-modal the modal body is not visible even if the overlay is not active. Please see the example

https://codesandbox.io/s/friendly-worker-evcyd

I can use it without no-wrap prop but this way the modal footer and header are not overlaid

Answer 1

That's because you're using the no-wrap property, which disabled the usage of the default slot in <b-overlay> .

You can read more here: https://bootstrap-vue.org/docs/components/overlay#non-wrapping-mode

By default, wraps the content of the default slot. In some cases you may want to obscure a parent container. Use the no-wrap prop to disable rendering of the wrapping (and ignore the default slot).

If you need to use no-wrap , you need to place the content you want outside of <b-overlay> .

<b-modal>
  <b-overlay no-wrap>
    <template #overlay>
      Overlay content here
    </template>
  </b-overlay>

  <div>Modal content</div>
</b-modal>

Answer 2

As mentioned here , you can add body-class="position-static" on b-modal and rounded prop enabled. This will make the entire b-modal covered with overlay.