修复 Bootstrap 模式的 rootElement

将 Bootstrap 5.3 模态框放置在除 body 之外的容器中时，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 中修复如下

1. 找到class Backdrop extends Config，有_configAfterMerge(config)
2. 将 config.rootElement = ... 替换为 config.rootElement = getElement(config.rootElement) ||文档.正文；如果找不到 rootElement，则 with 将回退到 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;
}

1. 找到类Modal extends BaseComponent，有_initializeBackDrop()
2. 在 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: ，例如：

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

这是我在SPA中的用法。

// 我的 SPA 中有一个动态模态，所以我正在渲染一个模态
// 首先在 DocumentFragment 内并保存此模态对象
// 在一个变量中，以便我可以在之后调用模态的方法，例如 close()

常量值 = {
    模态：{
        id: '我的模态',
        对象：空
    }
}

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




          </div>

            
        

以上是修复 Bootstrap 模式的 rootElement的详细内容。更多信息请关注PHP中文网其他相关文章！