Not using the lightbox fullscreen - can't close when clicking outside

[drina-musaj]

Hello!
I've been trying to use YARL as a lightbox but not on fullscreen. I want the background to be dark transparent and show the page in the back, but also have a white container around the media.
When i try the controller={{ closeOnBackdropClick: true }} it doesn't work because of my customizations.
Is there a better way to do this? I think it doesn't recognize the backdrop as a yarl__root. But only as a container.
Help would be appreciated!

[igordanchenko]

I won't be able to answer your question as you forgot to share a code snippet demonstrating your customizations, but here is one way to implement the requirements you described.

/* styles.css */

.yarl__root {
  --yarl__color_backdrop: rgba(0, 0, 0, 0.3);
}

.yarl__slide_image {
  outline: 2px solid white;
  outline-offset: 4px;
}

I hope this helps.

[drina-musaj]

Thanks for the answer, this still doesn't work.
I'm sharing my code with you if it helps!

.yarl__root {
  background-color: rgba(0, 0, 0, 0.8);
}
.yarl__container {
  background-color: rgb(249, 248, 248);
  width: min(95vw, 900px);
  margin: auto;
  overflow: hidden;
  border-radius: 0.75rem;
}
.yarl__thumbnail {
  background-color: rgb(249, 248, 248);
}
.yarl__thumbnails_container {
  background-color: rgba(255, 255, 255, 0);
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.yarl__thumbnails_thumbnail {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.yarl__thumbnails_thumbnail_active {
  opacity: 1;
}

.yarl__button {
  filter: none;
}

.yarl__button svg {
  color: rgb(26, 117, 159);}
  

And this is my Lightbox:

  <Lightbox
       open={lightboxOpen}
       close={() => setLightboxOpen(false)}
       carousel={{ imageFit: 'contain' }}
       index={currentIndex}
       controller={{closeOnBackdropClick: true}}
       on={{ view: ({ index }) => setCurrentIndex(index) }}
       styles={{
         container: {
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
         },
         slide: {
           maxWidth: '100%',
           height: 'auto',
         },
       }}
    
       plugins={[Video, Thumbnails]}
       thumbnails={{
         position: 'bottom',
         width: 100,
         height: 60,
         border: 2,
         borderRadius: 8,
         padding: 4,
         gap: 8,
         vignette: false,
         imageFit: 'cover',
       }}
     />

[igordanchenko]

Thanks for the answer, this still doesn't work.

It doesn't work in conjunction with your customizations that you previously didn't share. It was just a shot in the dark.

I'm sharing my code with you if it helps!

Indeed, the customizations you implemented won't allow you to use the closeOnBackdropClick feature because the lightbox attaches pointer listeners to the yarl__container DOM node; however, in your implementation, it doesn't cover the "backdrop" area.