Fix Bootstrap modal&#s rootElement

When placing a Bootstrap 5.3 modal inside a container other than body, bootstrap's

Backdrop's source code has this part:

const Default = {
  className: 'modal-backdrop',
  clickCallback: null,
  isAnimated: false,
  isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
  rootElement: 'body' // give the choice to place backdrop under different elements
}

However there is no mechanism provided to customize rootElement

I fixed as follows in bootstrap.bundle.js version v5.3.3

1. Find class Backdrop extends Config, there _configAfterMerge(config)
2. Replace config.rootElement = ... with config.rootElement = getElement(config.rootElement) || document.body; with will fallback to body if rootElement is not found, ie. null returned from getElement():

_configAfterMerge(config) {
      // use getElement() with the default "body" to get a fresh Element on each instantiation
      config.rootElement = getElement(config.rootElement) || document.body;
      return config;
}

1. Find class Modal extends BaseComponent, there _initializeBackDrop()
2. add after isAnimated: this._isAnimated() a new property rootElement: this._config.rootElement:

_initializeBackDrop() {
      return new Backdrop({
        isVisible: Boolean(this._config.backdrop),
        // 'static' option will be translated to true, and booleans will keep their value,
        isAnimated: this._isAnimated(),
        rootElement: this._config.rootElement
      });
}

When initializing your bootstrap with new bootstrap add rootElement: , for example:

const myModal = new bootstrap.Modal(
    document.getElementById('myModal')
    , {
        backdrop: "static", 
        rootElement: '#your-div'
    }
)
myModal.show()

Here's my usage in SPA.

// I have a dynamic modal in my SPA, so I'm rendering a modal
// inside a DocumentFragment first and save this modal object
// in a variable so that I can call modal's methods after, like close()

const VALUES = {
    modal: {
        id: 'my-modal',
        obj: null
    }
}

const fragment = document.createRange().createContextualFragment(
    `<div>




          

            
        

The above is the detailed content of Fix Bootstrap modal&#s rootElement. For more information, please follow other related articles on the PHP Chinese website!

bootstrap String Object NULL if for const class Property JS this Other

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn