Bootstrap 5 offcanvas disable close on click

Question

I'm using the offcanvas component (https://getbootstrap.com/docs/5.0/components/offcanvas/). However I was wondering if it is possible to prevent it from closing when I click outside the offcanvas window. I've managed to stop it from closing when I press ESC but theres no way (as far as the docs go) to prevent it from closing when I do a mouse click outside of the offcanvas. Does anyone have an idea?

EDIT: I managed to get it working halfway by listening for the hide.bs.offcanvas event and then using e.preventDefault(); However now I'm unable to close the offcanvas with its default close button because it will always cancel the hide event. Any ideas?

score 3 · Answer 1 · answered Sep 26 '22 at 10:48

3

Now, adding data-bs-backdrop="static" prevents offcanvas to close when clicking outside of it (= clicking on backdrop)

Reference https://getbootstrap.com/docs/5.2/components/offcanvas/#static-backdrop

answered Sep 26 '22 at 10:48

ZalemCitizen

474
7
13

score 1 · Accepted Answer · answered Apr 07 '21 at 12:08

1

Bootstrap adds a click listener to the body. Therefore, you would attach a click event listener to the body, and stop the event from propagating...

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

Demo

answered Apr 07 '21 at 12:08

Carol Skelly

351,302
90
710
624

Thanks a lot! This seems to work, is this fine to use though? Won't this cause other events/document click listeners to not behave properly? Just wondering – sharpness Apr 07 '21 at 14:10
It would only impact listeners attached to the body (which the developer should be aware of!). As you can see from the demo it doesn't cause issues with the other Bootstrap events.. and it's the only way to address the question you asked. – Carol Skelly Apr 07 '21 at 14:45
i try this solution but is the dropdown is affected and not close when its open – francojohnc Jul 01 '21 at 14:52
@francojohnc Hi, try updating your bootstrap, in newer versions the offcanvas does not close anymore when you click on other parts of the page – sharpness Jul 01 '21 at 18:25
@sharpness: I'm using BS 5.1.3 and can confirm that a standard offcanvas does close when you click the backdrop. – DaleyKD Oct 19 '21 at 15:37
@Zim: In version 5.1.1, this no longer works. – DaleyKD Oct 19 '21 at 17:42

score 1 · Answer 3 · answered Aug 01 '22 at 13:52

I found a CSS only solution for this by setting pointer-events:none on the offcanvas-backdrop class. The exact CSS style would be

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

This will prevent any click events on the offcanvas' backdrop and click events inside the offcanvas will work as usual.

score 0 · Answer 4 · answered Mar 03 '22 at 19:26

0

Setting data-bs-keyboard="false" as a data-attribute of the off-canvas element seems to work in Bootsrap 5.1.1

answered Mar 03 '22 at 19:26

Chris02stang

11
1

It does work at least in Boostrap 5.2.3, which allows keeping the offcanvas opened without a backdrop: data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false" – jalogar Aug 17 '23 at 11:24

score 0 · Answer 5 · answered Jul 24 '22 at 08:37

By using beforeDismiss return false, it won't close on dismiss option, since click on backdrop is pointed to dismiss it won't close the offcanvas, in order close the offcanvas we can use close method

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

score 0 · Answer 6 · answered Oct 30 '22 at 16:54

0

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

will work as expected

place it on the root CSS file.

answered Oct 30 '22 at 16:54

Manojkumar Muthukumar

283
3
10

score 0 · Answer 7 · answered Nov 28 '22 at 20:41

The Bootstrap 5.2 introduces new options to do it.
The feature is Static backdrop

But the Bootstrap 5.1 haven't it.
But you can use js code:


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();
});

score -1 · Answer 8 · answered Oct 19 '21 at 18:35

I don't love this solution, but it works for my needs as of today. (I'm really hoping Bootstrap will give us this functionality ASAP.)

$("#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();
});

Bootstrap 5 offcanvas disable close on click

8 Answers8