Bootstrap 5 offcanvas禁用点击关闭

Question

我正在使用offcanvas组件(https://getbootstrap.com/docs/5.0/components/offcanvas/)。然而，我想知道当我点击画布外的窗口时，是否可以防止它关闭。当我按下ESC时，我已经设法阻止它关闭，但当我在画布外点击鼠标时，没有办法(就文档而言(阻止它关闭。有人有主意吗？

编辑：通过监听hide.bs.offcanvas事件，然后使用e.preventDefault((，我成功地使它工作了一半；但是，现在我无法用默认的关闭按钮关闭offcanvas，因为它总是会取消隐藏事件。有什么想法吗？

Answer 1

现在，添加data-bs-backdrop="static"可以防止在画布外单击时关闭(=单击背景(

参考https://getbootstrap.com/docs/5.2/components/offcanvas/#static-背景

Answer 2

通过在offcanvas-backdrop类上设置pointer-events:none，我找到了一个仅支持CSS的解决方案。确切的CSS样式应该是

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

这将防止在offcanvas背景上发生任何点击事件，offcanvas内部的点击事件将照常工作。

Answer 3

Bootstrap为body添加了一个点击侦听器。因此，您可以将一个点击事件侦听器附加到body，并阻止事件传播。。。

document.body.addEventListener('click', function(e){
e.stopPropagation()
})

演示

Answer 4

将data-bs-keyboard="false"设置为画布外元素的数据属性似乎在Bootsrap 5.1.1 中有效

Answer 5

通过使用beforeDismiss return false，它不会在关闭选项时关闭，因为点击背景是指向关闭的，它不会关闭offcanvas，为了关闭offcan画布，我们可以使用关闭方法

ngbCanvasOptions: NgbOffcanvasOptions = {
beforeDismiss: () => {
return false;
},
keyboard: false,
animation: true
};

Answer 6

.offcanvas-backdrop {
pointer-events: none !important;
}

将按预期工作

将其放在根CSS文件上。

Answer 7

Bootstrap 5.2引入了新的选项。
功能是静态背景

但是引导程序5.1没有。
但是你可以使用js代码：

let offcanvasEl = $("#myOffcanvas");
let offcanvasAllowClose = false;
offcanvasEl.find("button, a").on("click", () => offcanvasAllowClose = true);
offcanvasEl.on("hide.bs.offcanvas", (ev) => {
if (offcanvasAllowClose) return;
ev.preventDefault();
});

Answer 8

我不喜欢这个解决方案，但它能满足我今天的需求。(我真的希望Bootstrap能尽快给我们这个功能。(

$("#myOffcanvas").on("shown.bs.offcanvas", function () {
const backdrop = $(".offcanvas-backdrop");
const parent = backdrop.parent();
const cloned = backdrop.clone();
backdrop.remove();
parent.append(cloned);
}).on("hide.bs.offcanvas", function () {
$(".offcanvas-backdrop").remove();
});