Styleguide Navigation

Lightbox

  • Status unknown
  • 2017-01-18 Added [jch]
  • 2017-04-27 Added a version, which copies dom used in class selection overlays in mobile [gb]
  • 2025-03-07 Added role='dialog' to the lightbox [jr]

Variants of Lightbox

Default

Open Template

Real Content

Small

Alert

Alert (not closeable)

Alert (closeable)

Alert (wide)

HTML Lightbox

Inline Markup

Open Javascript Template

Open existing element (will copy html, not dom)

Open from script

Open existing element (will copy dom, usually it will be hidden)

Remote Content

Just link to a page that contains a lightbox (we will look for ".js-lightbox--content")

Different link für lightbox content.

If we can't find any "js-lightbox--content", we'll go for the child element of #main-content and display them in the lightbox. This is a fallback scenario and may lead to potential problems. (It's also against the concept of designated lightbox pages)

Javascript Lightbox

Call with ew.ui.lightbox.show(html string / dom element / jquery element, options, title)

options

  • closeCB (undefined) callback function on close
  • class (undefined) extra class for lightbox
  • hideCloseButton (false) / true - no CloseButton is visible
  • defaultCloseButton (true) / false - user can close lightbox by ESC or other close btn in text

ew.ui.lightbox.show() - returns a lightbox instance with following methods:

  • close Closes the lightbox
  • update(html string / dom element / jquery element, title) Updates the content of the lightbox
  • setLoadingState(boolean) Shows or hides a loading spinner
  • setTitle(html string) Set/Update a title