JSFiddle - React, Tailwind, and code Playground

HTML

<button>Open</button>
<input type="text">
<dialog>
  <button>Close</button>
</dialog>

CSS

body.only-dialog * {
  pointer-events: none;
}

body.only-dialog dialog * {
  pointer-events: all;
}

JavaScript

const $dialog = document.querySelector('dialog')

document.querySelector('button').onclick = () => {
	document.body.classList.add('only-dialog')
  $dialog.setAttribute('open', true)
}

document.querySelector('dialog button').onclick = () => {
  document.body.classList.remove('only-dialog')
  $dialog.removeAttribute('open')
}