ブートストラップ モーダルの rootElement を修正

Bootstrap 5.3 モーダルを body 以外のコンテナ内に配置する場合、Bootstrap の

Backdrop のソース コードには次の部分があります:

ただし、rootElement をカスタマイズするメカニズムは提供されていません

bootstrap.bundle.js バージョン v5.3.3 で以下のように修正しました

1. クラス Backdrop が Config を拡張しているのを見つけて、_configAfterMerge(config) を見つけます。
2. config.rootElement = ... を config.rootElement = getElement(config.rootElement) に置き換えます ||ドキュメント.ボディ; rootElement が見つからない場合、with は body にフォールバックします。 getElement() から null が返されました:

1. クラス Modal が BaseComponent を拡張していることを見つけます。そこに _initializeBackDrop()
2. isAnimated: this._isAnimated() の後に新しいプロパティ rootElement: this._config.rootElement: を追加します。

新しいブートストラップでブートストラップを初期化する場合、rootElement: <コンテナ: HTMLElement as object or string selector> を追加します。例:

これが SPA での私の使用法です。

// SPA に動的モーダルがあるので、モーダルをレンダリングしています
// まず DocumentFragment 内でこのモーダル オブジェクトを保存します
// 変数に入れて、close() のように後でモーダルのメソッドを呼び出せるようにします

定数値 = {
    モーダル: {
        ID: 'my-modal',
        オブジェクト: null
    }
}

const フラグメント = document.createRange().createContextualFragment(
    `<div>




          </div>

            
        

以上がブートストラップ モーダルの rootElement を修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。