JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<button id="open-dialog" type="button">
  Open dialog
</button>

<button id="open-dialog-modal" type="button">
  Open dialog as modal
</button>

<button id="open-dialog-scroll-lock" type="button">
  Open dialog as modal w/ scroll lock
</button>

<dialog id="dialog">
  Dialog is open.
  <button id="close-dialog" type="button">
    Close dialog
  </button>
</dialog>

<button id="open-popover" type="button" popovertarget="popover" popovertargetaction="show">
  Open popover
</button>
<button id="open-popover-with-scroll-lock" type="button" popovertarget="popover-with-scroll-lock" popovertargetaction="show">
  Open popover w/ scroll lock
</button>

<div id="popover" popover="auto">
  Popover is open.
  <button type="button" popovertarget="popover" popovertargetaction="hide">
    Close popover
  </button>
</div>

<div id="popover-with-scroll-lock" popover="auto">
  Popover is open.
  <button type="button" popovertarget="popover-with-scroll-lock" popovertargetaction="hide">
    Close popover
  </button>
</div>


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed porta dui. Fusce ornare elit vitae orci ornare gravida. Nulla facilisi. Mauris pharetra odio in sem egestas viverra. Aliquam vitae quam erat. Donec finibus lacus tristique nulla mattis, quis consectetur eros scelerisque. Integer aliquam ex risus, in varius nunc bibendum auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla luctus varius vestibulum. Praesent consectetur eros urna, at condimentum sem ultricies non. Phasellus faucibus, sem consectetur tempus iaculis, lacus ipsum congue metus, et sollicitudin nibh metus ut tellus. Nulla elementum nec elit vel faucibus. Pellentesque sollicitudin faucibus mi ac iaculis.
</p>
<p>
Suspendisse venenatis purus metus, viverra auctor dui mattis eget. Donec id justo ut risus euismod sollicitudin sed non mi. Ut euismod diam vitae nulla viverra tempus a a sapien. Etiam nulla augue, dictum faucibus pulvinar et, elementum eget velit. In...

CSS

[popover]::backdrop {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);        
}

dialog::backdrop {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);        
}

body:has(dialog[open].scroll-locked),
body:has(#popover-with-scroll-lock:popover-open) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

JavaScript

const dialogOpenButton = document.getElementById( 'open-dialog' );
const dialogOpenScrollLockButton = document.getElementById( 'open-dialog-scroll-lock' );
const dialogOpenModalButton = document.getElementById( 'open-dialog-modal' );
const dialogCloseButton = document.getElementById( 'close-dialog' );
const dialog = document.getElementById( 'dialog' );
dialogOpenButton.addEventListener( 'click', () =>  dialog.show() );
dialogOpenModalButton.addEventListener( 'click', () => dialog.showModal() );
dialogOpenScrollLockButton.addEventListener( 'click', () => {
	dialog.classList.add( 'scroll-locked' );
  dialog.showModal();
} );
dialogCloseButton.addEventListener( 'click', () => {
	dialog.close();
  dialog.classList.remove( 'scroll-locked' );
});