Lightbox UX Improvement: Allow Modal Close on Click Outside Image

[lucafalefoto]

Hi all,

First of all, I’d like to say how much I enjoy using Quire as a static site generator—thank you for all the great work!

I imagine I’m not the only one using Quire primarily for building static websites rather than for e-publishing. In this context, a smooth and intuitive user experience is key.

I wanted to share a UX-related improvement suggestion for the lightbox/modal behavior when viewing images. Currently, when a user clicks an image on a page, a full-screen modal opens, allowing navigation between images. This works great—but there's one missing interaction:

To close the modal, the user must click the close button. Clicking anywhere else, like the background area outside the image, does nothing. From a user experience perspective, this is unexpected—most users today would anticipate that clicking outside the image (but inside the modal) would also close it.

It took me a fair bit of time to implement this expected behavior because it requires modifications across three separate files:

1. In project-base-directory/_layouts/base.11ty.js
   I had to manually include the custom.js script before the closing </body> tag [because custom.js is ignored by default, see: https://github.com/Feature Request: Automatically Include custom.js Without Editing base.11ty.js #1030#discussion-8326034]:

          <script src="/_assets/javascript/custom.js"></script>
        </body>
      </html>
    `,
    'liquid'
  )
}

2. In project-base-directory/content/_assets/styles/custom.css
   I added the following rule to improve the layout of the lightbox image:

.q-lightbox-slides__slide[data-lightbox-current="true"] img.q-figure__image {
  width: initial !important;
}

3. In project-base-directory/content/_assets/javascript/custom.js
   I added this event listener to close the modal when the user clicks outside the image:

document.addEventListener('click', function (event) {
  const modal = document.querySelector('q-modal[data-modal-active="true"]');
  const closeButton = document.querySelector('#close-modal');

  if (!modal || !closeButton) return;

  const clickedElement = event.target;

  // Prevent closing if clicking on the image, a button, or the caption
  const isImage = clickedElement.closest('.q-figure__image');
  const isButton = clickedElement.closest('button');
  const isCaption = clickedElement.closest('.q-lightbox-slides__caption-content');

  if (!isImage && !isButton && !isCaption && modal.contains(clickedElement)) {
    console.log('Click outside image and buttons: closing modal');
    closeButton.click();
  }
});

If you'd like to see this in action, feel free to test it on this site I built with Quire (sorry, Italian only):
👉 https://www.padova-decorata.it/

It would be fantastic if this functionality (or something similar) could be considered as a default behavior—or at least easier to implement without editing multiple files.

Thanks again for your hard work and support!

[Erin-Cecele]

Thank you for this input, @lucafalefoto. We will take this feature improvement into consideration.

We also enjoyed checking out your Quire site. Bravo! It's a beautiful publication. Is this project complete? If so, we'd love to include it on our Community Showcase and in the Quire newsletter? If you are open to this, please complete this submission form.

[lucafalefoto]

Thank you so much for your kind words — it's truly an honor to hear that you enjoyed the site. While it's a small project focused on a local context and currently only available in Italian, I would be delighted to have it included in your Community Showcase and newsletter. I hope it might serve as inspiration for others looking to document the art and history of their own regions. Thank you again for the opportunity!

[lucafalefoto]

We also enjoyed checking out your Quire site. Bravo! It's a beautiful publication. Is this project complete? If so, we'd love to include it on our Community Showcase and in the Quire newsletter? If you are open to this, please complete this submission form.

Erin, I completed the submission form. Thank you.

[Erin-Cecele]

Yes! Thank you so much for sharing @lucafalefoto. It's fantastic. We shared the publication in last month's newsletter: https://newsletters.getty.edu/t/t-4C4A9AE5C42C807C2540EF23F30FEDED. We will have it up on the website's community showcase shortly!

[Erin-Cecele]

Apologies for the delay. This has been moved to our issues board as a potential feature request/enhancement #1098