Popup / Modal / Lightbox
Table of Contents
About
The term pop-up / modal / ligthbox are all overlay window
- A pop-up generally does not need any action
- A modal needs a click to show up
Because they differs only on their property, library may offer them all three.
Example of lightbox with Bootstrap Modal
- The modal lightbox is a box centered with a dark background and with an image as content. It is not shown at first (or not present in the DOM at first). The user needs to click on a link to open it up.
<div class="modal" id="lightBoxModalId" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: fit-content;">
<div class="modal-content">
<div class="modal-body" style="padding: 0">
<button type="button" class="close-media" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<img src="/_media/web/css/surfer-in-the-see-200h.png">
</div>
</div>
</div>
</div>
- A little bit of css to locate the close button in the top right corner of the lighbox.
.close-media {
background-color: transparent;
border: 0;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
position: absolute;
right: 2px;
top: 2px;
}
- The image shown is small (200px) and is wrapped in link that will open the lightbox when clicked
<a class="lightbox" href="/_media/web/css/surfer-in-the-see-200h.png">
<img src="/_media/web/css/surfer-in-the-see-200h.png" width="200"/>
</a>
- The javascript that will show the lightbox when clicking on the image link.
document.querySelectorAll(".lightbox").forEach((lightBoxAnchor) => {
lightBoxAnchor.addEventListener("click", async function (event) {
event.preventDefault();
let lightBoxElement = document.getElementById('lightBoxModalId');
let lightBoxModal = bootstrap.Modal.getOrCreateInstance(lightBoxElement);
lightBoxModal.toggle();
});
});
- Output: Click on the image to see the lightbox.
Library
A Lightbox displays images and videos by filling the screen, and dimming out the rest of the web page.
- https://lokeshdhakar.com/projects/lightbox2/ (original, jquery based)
- https://github.com/fancyapps/fancybox (need to pay)
- https://ashleydw.github.io/lightbox/ (Archived)