如何实现Bootstrap Offcanvas显示时可交互页面且不关闭？

完全可行，只需要调整几个默认配置和样式就能实现。Bootstrap默认的Offcanvas行为是添加遮罩阻止后台交互，且点击遮罩/按ESC会关闭组件，我们要做的就是修改这些行为：

1. 禁用自动关闭触发项
   给Offcanvas元素添加两个属性：

   • data-bs-backdrop="static"：禁止点击遮罩关闭Offcanvas
   • data-bs-keyboard="false"：禁止按ESC键关闭Offcanvas

   示例HTML：

   <div class="offcanvas offcanvas-start" id="interactiveOffcanvas" tabindex="-1" 
        data-bs-backdrop="static" data-bs-keyboard="false">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title">可后台交互的Offcanvas</h5>
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
     </div>
     <div class="offcanvas-body">
       这里是Offcanvas内容，现在你可以点击页面其他区域了
     </div>
   </div>
   

2. 允许后台页面接收交互事件
   默认的遮罩层会阻止鼠标点击穿透到后台页面，需要修改遮罩的CSS属性：

   .offcanvas-backdrop.show {
     pointer-events: none;
   }
   

   如果你不想全局修改所有Offcanvas的遮罩行为，可以给目标Offcanvas加个自定义类，比如allow-bg-interaction，然后针对性修改样式：

   <div class="offcanvas offcanvas-start allow-bg-interaction" id="interactiveOffcanvas" tabindex="-1" 
        data-bs-backdrop="static" data-bs-keyboard="false">
     <!-- 内容 -->
   </div>
   

   .allow-bg-interaction ~ .offcanvas-backdrop.show {
     pointer-events: none;
   }
   

完成以上设置后，Offcanvas只会通过内部的关闭按钮或者手动调用JavaScript方法（bootstrap.Offcanvas.getInstance(document.getElementById('interactiveOffcanvas')).hide()）来关闭，后台页面的所有元素都可以正常交互，不会触发Offcanvas关闭。

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