Bootstrap v5.0点击Offcanvas按钮同时触发两种遮罩层的原因排查

以下是导致点击Offcanvas按钮时，页面同时生成modal-backdrop和offcanvas-backdrop的常见原因：

• 触发按钮属性错误：如果Offcanvas的触发按钮同时设置了data-bs-toggle="modal"和data-bs-toggle="offcanvas"，或是错误复用了Modal的触发属性，会同时触发Modal和Offcanvas两个组件，进而生成双遮罩层。检查触发按钮，确保只保留data-bs-toggle="offcanvas"以及对应指向Offcanvas容器的data-bs-target属性。

• 组件重复初始化：手动通过JavaScript初始化时，若错误地将Offcanvas容器当作Modal来初始化（比如调用了bootstrap.Modal），或是页面重复引入了Bootstrap的JS文件，会造成组件重复触发，生成双遮罩。确认JS代码仅对Offcanvas容器执行new bootstrap.Offcanvas()初始化，且Bootstrap JS文件只引入一次。

• HTML结构嵌套错误：如果把Offcanvas组件嵌套在Modal组件内部，触发Offcanvas时，Modal的遮罩会被激活，同时Offcanvas自身的遮罩也会生成。Bootstrap 5规范中，Offcanvas不应嵌套在Modal内部，需将其放在Modal外部的独立DOM层级中。

• 自定义JS逻辑冲突：页面中的自定义JavaScript代码，若在Offcanvas按钮的点击事件里额外触发了Modal的显示逻辑，也会导致双遮罩出现。检查点击事件绑定代码，确保没有多余的Modal相关调用。

内容的提问来源于stack exchange，提问作者Kinesis