Popup

Simple

Three simple popups with different scaling settings.
1 — fits horizontally and vertically,
2 — only horizontally,
3 — no gaps, zoom animation, close icon in top-right corner.

image-gallery image-gallery image-gallery

Gallery

In this example lazy-loading of images is enabled for the next image based on move direction.

image-gallery image-gallery image-gallery image-gallery image-gallery image-gallery image-gallery image-gallery

Popup with Video or Maps

In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.

YouTube Vimeo Google Map

Dialog with CSS animation

Animations are added with simple CSS transitions, you can make them look however you wish.

Fade-zoom animation Fade-slide animation

Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

Popup with form

Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.

Open form

Form

Lightbox has an option to automatically focus on the first input. It's strongly recommended to use inline popup type for lightboxes with form instead of ajax (to keep entered data if the user accidentally refreshed the page).

Modal popup

A modal popup disables the usual ways to close popups.

Open modal

Modal dialog

You won't be able to dismiss this by usual means (escape or click button), but you can close it programatically based on user choices or actions.

Dismiss

Error handling

This is just basic example of how error messages are displayed. Surely, you can change text or style them.

Broken image Broken ajax request

Ajax popup

You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window

Load content via ajax Load another content via ajax