Korrigieren Sie das RootElement des Bootstrap-Modals

Wenn Sie ein Bootstrap 5.3-Modal in einem anderen Container als dem Körper platzieren, ist Bootstrap

Der Quellcode von Background enthält diesen Teil:

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
}

Es gibt jedoch keinen Mechanismus zum Anpassen von rootElement

Ich habe Folgendes in der Bootstrap.bundle.js-Version v5.3.3 behoben

1. Finden Sie die Klasse „Hintergrund erweitert Config“ und dort _configAfterMerge(config)
2. Ersetzen Sie config.rootElement = ... durch config.rootElement = getElement(config.rootElement) || document.body; with wird auf body zurückgreifen, wenn rootElement nicht gefunden wird, d. h. null zurückgegeben von 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;
}

1. Finden Sie die Klasse Modal, die BaseComponent erweitert, dort _initializeBackDrop()
2. Fügen Sie nach isAnimated: this._isAnimated() eine neue Eigenschaft rootElement hinzu: 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
      });
}

Wenn Sie Ihren Bootstrap mit einem neuen Bootstrap initialisieren, fügen Sie rootElement hinzu: , zum Beispiel:

const myModal = new bootstrap.Modal(
    document.getElementById('myModal')
    , {
        backdrop: "static", 
        rootElement: '#your-div'
    }
)
myModal.show()

Hier ist meine Verwendung im SPA.

// Ich habe ein dynamisches Modal in meinem SPA, also rendere ich ein Modal
// zuerst in ein DocumentFragment einfügen und dieses modale Objekt speichern
// in einer Variablen, damit ich die Methoden von Modal danach aufrufen kann, wie close()

const VALUES = {
    modal: {
        id: 'mein-modal',
        obj: null
    }
}

const fragment = document.createRange().createContextualFragment(
    `<div>




          </div>

            
        

Das obige ist der detaillierte Inhalt vonKorrigieren Sie das RootElement des Bootstrap-Modals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!