將 Bootstrap 5.3 模態框放置在 body 以外的容器中時,bootstrap 的
Backdrop的源碼中有這部分:
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 }
但是沒有提供自訂 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 }); }
使用新的引導程式初始化引導程式時,新增 rootElement: ,例如:
const myModal = new bootstrap.Modal( document.getElementById('myModal') , { backdrop: "static", rootElement: '#your-div' } ) myModal.show()
這是我在SPA中的用法。
// 我的 SPA 中有一個動態模態,所以我正在渲染一個模態 // 首先在 DocumentFragment 內並儲存此模態對象 // 在一個變數中,以便我可以在之後呼叫模態的方法,例如 close() 常量值 = { 模態:{ id: '我的模態', 物件:空 } } const 片段 = document.createRange().createContextualFragment( `<div> </div>
以上是修復 Bootstrap 模式的 rootElement的詳細內容。更多資訊請關注PHP中文網其他相關文章!