JSFiddle - React, Tailwind, and code Playground

by jarhar

HTML

<h3>overlay demo</h3>

<div><label>use overlay<input type=checkbox checked></label></div>
<br>

<button popovertarget=popover1>toggle popover 1</button>
<div id=popover1 popover=manual>popover 1</div>

<button popovertarget=popover2>toggle popover 2</button>
<div id=popover2 popover=manual>popover 2</div>

CSS

#popover2 {
  left: 30px;
  top: 30px;
}

[popover] {
  opacity: 0;
}
[popover]:popover-open {
  @starting-style {
    opacity: 0;
  }
  opacity: 1;
}

[popover] {
  transition: opacity 1s, display 1s allow-discrete;
}
[popover].overlay {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

JavaScript

const checkbox = document.querySelector('input');
const updatecheckbox = () => {
  document.querySelectorAll('[popover]').forEach(popover => {
    if (checkbox.checked) {
      popover.classList.add('overlay');
    } else {
      popover.classList.remove('overlay');
    }
  });
};
updatecheckbox();
checkbox.onchange = updatecheckbox;