Popup / Modal / Lightbox

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
• A lightbox adds a dark background to give more contrast (ie more light)

Because they differs only on their property, library may offer them all three.

• 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">&times;</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.

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://dimsemenov.com/plugins/magnific-popup/
• https://github.com/fancyapps/fancybox (need to pay)
• https://ashleydw.github.io/lightbox/ (Archived)