JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas soluta modi fuga maiores, facere adipisci amet excepturi sit voluptatibus porro! Corporis pariatur incidunt deleniti consequuntur dolorum, fugit nihil adipisci. Sapiente.
</p>
<div class="button-container">
  <button class="toggle-button">Toggle lightsout</button>  
</div>

CSS

.button-container {
  position: relative;
}

.toggle-button {
  position: absolute;
  z-index: 1000;
}

JavaScript

let lightsout = document.createElement('div');
  lightsout.setAttribute('style', `
  	position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    opacity: .7;
  `);

const toggleLightsout = () => {
  if (lightsout.parentElement) {
  	document.body.removeChild(lightsout);
  } else {
  	document.body.appendChild(lightsout);
  }
};

const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', toggleLightsout);