<div id="html" hidden>

  <h1>DOM element/node</h1>

  <p>DOM element/node has been moved into the lightbox.</p>

</div>

​

<div id="image" hidden>

  <img width="1400" height="900" src="https://picsum.photos/1200/600">

</div>

​

<div id="persistant" hidden>

  <h1>Persistant</h1>

  <p>The value and state of this lightbox persists as long as you use the same instance.<br>Create a new instance when you don't want to keep the state.</p>

  <input placeholder="My value is persistant…">

</div>

​

<template id="template">

  <h1>HTML &lt;template&gt; Tag</h1>

  <p>The template element holds HTML code without displaying it.<br>Doesn't work in older browsers.</p>

</template>

​

<button class="html">html</button>

<button class="image">image</button>

<button class="persistant">persistant</button>

<button class="template">template</button>

html {

  width: 100%;

  height: 100%;

  font-family: sans-serif;

}

​

body {

  display: flex;

  align-items: center;

  align-content: center;

  justify-content: center;

  flex-wrap: wrap;

  min-height: 100%;

  margin: 0;

  color: white;

  text-align: center;

}

​

button {

  display: inline-block;

  appearance: none;

  background: #2875ed;

  margin: .5em;

  padding: .5em 1em;

  border: none;

  color: white;

  font: inherit;

  border-radius: 3px;

  cursor: pointer;

  outline: none;

}

const htmlInstance = basicLightbox.create(document.querySelector('#html'))

const imageInstance = basicLightbox.create(document.querySelector('#image'))

const persistantInstance = basicLightbox.create(document.querySelector('#persistant'))

const templateInstance = basicLightbox.create(document.querySelector('#template'))

​

document.querySelector('button.html').onclick = htmlInstance.show

document.querySelector('button.image').onclick = imageInstance.show

document.querySelector('button.persistant').onclick = persistantInstance.show

document.querySelector('button.template').onclick = templateInstance.show