Heim > Web-Frontend > js-Tutorial > Korrigieren Sie das RootElement des Bootstrap-Modals

Korrigieren Sie das RootElement des Bootstrap-Modals

DDD
Freigeben: 2024-12-15 22:30:14
Original
271 Leute haben es durchsucht

Fix Bootstrap  modal

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
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
  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
      });
}
Nach dem Login kopieren

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()
Nach dem Login kopieren

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>




          

            
        
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage