Correction du rootElement modal Bootstrap-js tutoriel-php.cn

Correction du rootElement modal Bootstrap

DDD

Libérer： 2024-12-15 22:30:14

original

269 Les gens l'ont consulté

Fix Bootstrap modal

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
}

Copier après la connexion

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

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

Trouver la classe Toile de fond étend la configuration, là _configAfterMerge(config)
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;
}

Copier après la connexion

Trouver la classe Modal étend BaseComponent, là _initializeBackDrop()
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
      });
}

Copier après la connexion

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()

Copier après la connexion

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>

Copier après la connexion

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!