Popup windows

Modals, dialogs, popups, etc... These are the widget that displays an overlaid window with content in it like more info, a form, or media.

You can add the "use-ajax" class, and some parameters to an internal link to open it in a modal window. You can do this with views, a field template, preprocessor, or custom field formatter. https://www.drupal.org/docs/drupal-apis/ajax-api/ajax-dialog-boxes

Here is a modal link for this page.

Drupal uses jQuery UI Dialog, using the data-dialog-type attribute to declare it a modal or dialog. The distinction being a modal blocks interaction with the underlying page and a dialog allows it (according to the docs).

Libraries

There's a million js libraries for modals, dialogs, lightboxes, slideshows, etc. Do we use the popular jquery plugins, or new vanilla js ones? Should we just use the drupal native dialog?

A lightbox is considered a gallery of images that you can click on to view as a slideshow. There are also standalone slideshow libraries, aka "slider" or "carousel".

Colorbox comes up as a popular module, it's recommended at the top of the lightbox module comparison. However, it's lacking support for media. https://www.drupal.org/project/colorbox/issues/2957030. In my opinion, the default styles are outdated, and it's worth looking at newer solutions.

Lightbox2 is another old popular one, but it's only available for Drupal 7.

Photoswipe, BaguetteBox and GLightbox seem to be the ones with compatible Drupal 10 modules, and are all using vanilla js.

Modules

https://www.drupal.org/project/photoswipe
A modern js image slideshow library.

https://www.drupal.org/project/baguettebox
baguettebox.js lightbox integration.

https://www.drupal.org/project/glightbox
glightbox.js integration.

https://www.drupal.org/project/dialogs
Add query parameter to link url to open in a dialog.

https://www.drupal.org/project/ng_lightbox
Specify link paths to automatically open in a dialog.

https://www.drupal.org/project/modal_page
Create content to show in a modal.

https://www.drupal.org/project/entity_overlay
Display content entities in an overlay.

https://www.drupal.org/project/entity_popin
Display referenced content in dialog (similar as above).

Tags
Ajax