Popup / Modal / Lightbox

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
  • 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.

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">&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.

Library

A Lightbox displays images and videos by filling the screen, and dimming out the rest of the web page.


Powered by ComboStrap