b-modal specify class for modal outer

Current Issue

Currently there is a way of specifying modal-class but not to specify its outer element _modal_outer_ (the element with the z-index and position absolute on it)

This is an issue if you’d like to add a specific wrapper class to encapsulate stylings when embedding in a 3rd party page.

Possible solution

One solution would be add a prop name called modal-outer-classthat can be used to specify a class name.

Only two code changes would be needed. One to add the class as a property on b-modal vue component:

https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/modal/modal.js

Above Line number 160:

  modalOuterClass: {
    type: [String, Array, Object],
    default: null
  },

Then add it to the component

Line number 379:

    modalOuterStyle() {
      // Styles needed for proper stacking of modals
      return {
        class: this.modalOuterClass,
        position: 'absolute',
        zIndex: this.zIndex
      }
    },

[gfoliver]

@fl-frontend You can add an id to the <b-modal id="example"> and the modal_outer id will be replaced to <div id="example___BV_modal_outer_" style="position: absolute; z-index: 1040;">. You can reference it in css with #example___BV_modal_outer_

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!