PhotoSwipe icon indicating copy to clipboard operation
PhotoSwipe copied to clipboard

PhotoSwipe closes active Bootstrap modal on close

Open Inggo-inHomePortal opened this issue 8 years ago • 9 comments

I have a PhotoSwipe that opens via a trigger inside a Bootstrap 3 modal. When I close Photoswipe, it also closes the open modal.

See the page below, the PhotoSwipe gallery is triggered by clicking on an image.

https://goo.gl/KWbWmg

Inggo-inHomePortal avatar Apr 26 '16 09:04 Inggo-inHomePortal

I created a workaround by adding a listener on 'close' to set a flag that disallows closing.

I then set switch the flag back on on 'destroy', but have to delay it by pswp.options.hideAnimationDuration.

...pswp initialization...

var allowClosing  = true;
pswp.listen('close', function(){
    allowClosing = false;
});
psw.listen('destroy', function(){
    setTimeout(function(){
        allowClosing = true;
}, gallery.options.hideAnimationDuration);

$(document).on('hide.bs.modal', '.modal', function(e){
    if (!allowClosing) {
        e.preventDefault();
        return false;
    }
});

But I have no idea what's triggering the hide event for Bootstrap in the first place.

Inggo-inHomePortal avatar Apr 26 '16 09:04 Inggo-inHomePortal

encounter this issue too.

derekang avatar May 18 '16 10:05 derekang

closes vex modal too

Yakoot avatar Feb 05 '17 13:02 Yakoot

closes material modal as well :(

brenden-t-r avatar May 23 '19 15:05 brenden-t-r

My less than ideal current solution is to just set all the options related to closing to false, remove the close button form the pswp div and add my own close function:

document.getElementsByClassName("pswp__top-bar")[0].addEventListener('click', (e) => {
      const pswpElement = document.querySelectorAll('.pswp')[0] as HTMLElement;
      pswpElement.classList.remove("pswp--open");
});

brenden-t-r avatar May 23 '19 21:05 brenden-t-r

I had the same issue with angular material dialog, I resolved it by disabling history option. The problem is caused by backward navigation triggered on close.

Ayoubiedas avatar May 23 '21 05:05 Ayoubiedas

Like Ayoubiedas, I solved it by disabling the history option:

openGallery(images?: IImage[]) {
    images = images || this.images;
    const options = {
        index: 0, // start at first slide
        history: false // this prevents the modals from closing
    };
    const gallery = new PhotoSwipe(this.photoSwipe.nativeElement, PhotoSwipeUI_Default, images, options);
    gallery.init();
}

rsilloca avatar Mar 25 '22 08:03 rsilloca

Still an issue for me, also it seems that the history option is no longer available in the latest version.

ugo-fl avatar Jul 05 '22 14:07 ugo-fl

Any solution in version 5.3.8? It's still closing the parent modal now. history option is no longer available in this version.

wengtytt avatar Aug 29 '23 13:08 wengtytt