부트스트랩 모달&#s rootElement 수정-JS 튜토리얼-php.cn

부트스트랩 모달&#s rootElement 수정

DDD

풀어 주다： 2024-12-15 22:30:14

원래의

268명이 탐색했습니다.

Fix Bootstrap modal

Bootstrap 5.3 모달을 본문이 아닌 컨테이너 안에 넣을 때 bootstrap의

Backdrop의 소스 코드에는 다음 부분이 있습니다.

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
}

로그인 후 복사

그러나 rootElement를 사용자 정의하기 위한 메커니즘은 제공되지 않습니다

bootstrap.bundle.js 버전 v5.3.3에서 다음과 같이 수정했습니다.

Background 확장 Config 클래스 찾기, _configAfterMerge(config)
config.rootElement = ...를 config.rootElement = getElement(config.rootElement) ||로 바꾸세요. 문서.본문; rootElement가 발견되지 않으면 body로 대체됩니다. 즉, getElement()에서 null이 반환되었습니다.

_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;
}

로그인 후 복사

BaseComponent를 확장하는 Modal 클래스를 찾으세요. 거기에는 _initializeBackDrop()이 있습니다.
isAnimated: this._isAnimated() 뒤에 새 속성 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
      });
}

로그인 후 복사

새 부트스트랩으로 부트스트랩을 초기화할 때 rootElement를 추가하세요: <컨테이너: 객체 또는 문자열 선택기로서의 HTMLElement> 예:

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

로그인 후 복사

SPA에서의 사용법은 다음과 같습니다.

// SPA에 동적 모달이 있어서 모달을 렌더링하고 있습니다.
// 먼저 DocumentFragment 내부에 넣고 이 모달 객체를 저장합니다.
// 나중에 모달의 메서드를 호출할 수 있도록 변수에 넣습니다(예: close()).

const 값 = {
    모달: {
        id: '내-모달',
        객체: null
    }
}

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

로그인 후 복사

위 내용은 부트스트랩 모달&#s rootElement 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!