修復 Bootstrap 模式的 rootElement

將 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 的機制

我在 bootstrap.bundle.js 版本 v5.3.3 中修復如下

1. 找到class Backdrop extends Config，有_configAfterMerge(config)
2. 將 config.rootElement = ... 替換為 config.rootElement = getElement(config.rootElement) ||文檔.正文；如果找不到 rootElement，則 with 將回退到 body，即。從 getElement() 傳回 null：

_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. 找到類別Modal extends BaseComponent，有_initializeBackDrop()
2. 在 isAnimated: this._isAnimated() 之後新增一個屬性 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
      });
}

使用新的引導程式初始化引導程式時，新增 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中文網其他相關文章！