Display Any Content In A Modal – basicLightbox

A minimal, fast lightbox library to display any HTML content (images, videos, iframes, text, etc) in a responsive modal window.

How to use it:

1. Install and import the basicLightbox as an ES module.

# Yarn
$ yarn add basiclightbox
# NPM
$ npm install basiclightbox --save

import * as basicLightbox from 'basiclightbox'

2. Or load the following JavaScript and CSS files in the HTML.

<link rel="stylesheet" href="./dist/basicLightbox.min.css" />
<script src="./dist/basicLightbox.min.js"></script>

3. Insert HTML content to the lightbox instance.

const instance = basicLightbox.create(`
      HTML CONTENT Here
`)
// or from an inline element
const instance = basicLightbox.create(
  document.querySelector('#element')
)

4. Show the lightbox when needed.

instance.show();

5. Hide/close the lightbox by fading the element out and by removing the element from the DOM.

instance.close(callback);

6. Config the lightbox with the following options.

const instance = basicLightbox.create(`
      HTML CONTENT Here
` {
  // is closable?
  closable: true,
  // additional CSS class
  className: '',
  // callbacks
  onShow: (instance) => {},
  onClose: (instance) => {}
})

7. Detect if the lightbox is visible.

instance.visible();

8. Get the DOM element/node associated with the instance.

instance.element();