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>




          

            
        

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!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn