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
_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; }
_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:
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 modals rootElement. For more information, please follow other related articles on the PHP Chinese website!