DEV Community
·
修复Bootstrap 5.3模态框的根元素
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在Bootstrap 5.3中，模态框的背景层默认附加到body，可能导致不当行为。通过修改bootstrap.bundle.js，可以自定义背景层的根元素。在初始化模态框时，使用rootElement参数指定容器。示例代码展示了如何在单页应用中动态创建并显示模态框。
🎯
关键要点
- 在Bootstrap 5.3中，模态框的背景层默认附加到body，可能导致不当行为。
- 可以通过修改bootstrap.bundle.js来自定义背景层的根元素。
- 在初始化模态框时，使用rootElement参数指定容器。
- 示例代码展示了如何在单页应用中动态创建并显示模态框。
- 修改bootstrap.bundle.js时，需要在Backdrop类中调整_configAfterMerge方法。
- 在Modal类中，_initializeBackDrop方法中添加rootElement属性。
- 初始化模态框时，传入rootElement参数以指定容器。
- 在单页应用中，使用DocumentFragment动态渲染模态框。
🏷️
标签
➡️
