Lightbox
1. What does the component do?
It is used to display detailed information of a content page.
2. When should the component be used?
- If detailed or additional information has to be shown on-demand on part of a page (for example, additional support when the tooltip is not sufficient).
- To display the editing mode on forms.
- For an enlarged view of images.
3. Rules
- The referenced page is not left.
- When the lightbox opens, it always fills the browser window.
- The lightbox has its own header which is always sticky.
- Only content-describing information may appear in the header (for example, the train number).
- The lightbox content can be created as part of basic design.
4. Variants and statuses
4.1 Standard
Design specification
Code specification
4.2 With form components
- A lightbox with form elements contains at least a ‘cancel’ and an ‘apply’ button.
- The ‘cancel’ button closes the lightbox again.
- If the lightbox is closed (‘cancel’ or X-button) when existing entries in the form have been changed, a warning message appears indicating that the form contains unsaved data.
- The buttons of a form (‘cancel’, ‘apply’, other functions) may be inserted in the footer. * The footer is always sticky and is displayed across the entire width of the lightbox (the same as the header).