Correction du rootElement modal Bootstrap

Lorsque vous placez un modal Bootstrap 5.3 dans un conteneur autre que le corps, le

du bootstrap

Le code source de Background contient cette partie :

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
}

Cependant, aucun mécanisme n'est fourni pour personnaliser rootElement

J'ai corrigé comme suit dans la version bootstrap.bundle.js v5.3.3

1. Trouver la classe Toile de fond étend la configuration, là _configAfterMerge(config)
2. Remplacez config.rootElement = ... par config.rootElement = getElement(config.rootElement) || document.body; with reviendra au corps si rootElement n'est pas trouvé, c'est-à-dire. null renvoyé par 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. Trouver la classe Modal étend BaseComponent, là _initializeBackDrop()
2. ajouter après isAnimated : this._isAnimated() une nouvelle propriété 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
      });
}

Lors de l'initialisation de votre bootstrap avec un nouveau bootstrap, ajoutez rootElement : , par exemple :

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

Voici mon utilisation en SPA.

// J'ai un modal dynamique dans mon SPA, donc je rends un modal
// d'abord à l'intérieur d'un DocumentFragment et enregistrez cet objet modal
// dans une variable pour pouvoir appeler les méthodes modales après, comme close()

const VALEURS = {
    modal : {
        identifiant : 'mon-modal',
        obj : nul
    }
}

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




          </div>

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!