# Lightbox ![Lightbox](../../etc/lightbox.png) A responsive lightbox to be used in conjunction with e.g. a MDLEXT lightboard component. ## Introduction The Material Design Lite Ext (MDLEXT) Lightbox displays an image filling the screen, and dimming out the rest of the web page. It acts as a modal dialog, using the `` element as a container for the lightbox. The component uses the [Material Design Lite Card component](http://www.getmdl.io/components/index.html#cards-section) to provide a layout for the lightbox. ## How to use the Google Chrome Dialog polyfill  1. Install [Google Chrome Dialog polyfill](https://github.com/GoogleChrome/dialog-polyfill). ```sh $ npm install --save dialog-polyfill ```  2. Use the polyfill in a static page. ```html Material Design Lite Extensions
```  3. Use it in your (Webpack) build.  3.1. Import `dialog-polyfill.css` in your main SASS file.. ```css @import '../node_modules/dialog-polyfill/dialog-polyfill.css'; ```  3.2. Require `dialog-polyfill`. ```javascript const dialogPolyfill = require('dialog-polyfill/dialog-polyfill'); ```  ... or import the `dialog-polyfill`. ```javascript import { dialogPolyfill } from 'dialog-polyfill/dialog-polyfill'; ``` >Adjust path to `node_modules` (libraries) according to where your files are located. >For more information about the dialog polyfill, refer to the [Google Chrome Dialog polyfill](https://github.com/GoogleChrome/dialog-polyfill) documentaion and the Material Design Lite [Dialog](http://www.getmdl.io/components/index.html#dialog-section) section. ## To include a MDLEXT lightbox component  1. Code a `` element with `class="mdlext-dialog"` to display the lightbox as a modal dialog. ```html ```  2. Code a `
` element with `class="mdlext-lightbox mdlext-js-lightbox mdl-card"` to hold the lightbox. ```html
```  3. Code a `
` element with `class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast"` to hold the close dialog button. ```html
```  4. Code a `
```  5. Code a `
` element with `class="mdl-card__media"` to hold the image and the image description. ```html
```  5. Inside the `
` element code an empty `` element and an empty `
` element to hold the image and the image description. ```html
```  6. Code a `