Forum Discussion
KnutCollettJrge
3 hours agoCommunity Member
Close a lightboxed slide by clicking outside it
In my opinion, clicking outside a lightbox/modal is an intuitive way of closing it. We've hidden the built-in button with javascript, but wanted to be able to close a lightboxed slide by clicking anywhere outside the lightbox. And finally I found a way.
One of the objects added to the scene when you lightbox a slide is an overlay. This makes the slide in the background darker. It can be found in the console and has the class "visible-overlay". I simply added an eventlistener listening for clicks on this element and used the function of the original Close-button to do the job. The script is placed on the lightboxed slide.
Does anyone see any immediate dangers of creating instability doing this?
Here's the Javascript.
// Select the element with the class "visible-overlay"
const overlayElement = document.querySelector('.visible-overlay');
// Check if the element exists to avoid errors
if (overlayElement) {
// Add an event listener for a click event
overlayElement.addEventListener('click', (event) => {
// Simulate a click on the default close button element
var closeButton = document.getElementById("light-box-close");
if (closeButton) {
closeButton.click();
overlayElement.removeEventListener('click', (event));
}
});
}
No RepliesBe the first to reply
Related Content
- 12 months ago
- 10 months ago
- 2 years ago
- 4 months ago