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>




          

            
        

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!

bootstrap String Object NULL if for const class Property JS this Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn