Home > Web Front-end > JS Tutorial > Fix Bootstrap modal&#s rootElement

Fix Bootstrap modal&#s rootElement

DDD
Release: 2024-12-15 22:30:14
Original
271 people have browsed it

Fix Bootstrap  modal

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
}
Copy after login

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;
}
Copy after login
  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
      });
}
Copy after login

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()
Copy after login

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>




          

            
        
Copy after login

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!

source:dev.to
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template