HTML can do that?!

<button popovertarget="ticket">Summon the popover</button>

<div id="ticket" popover>
  <p>I live in the top layer. Click outside or
     press Esc — light-dismiss is built in.</p>
  <button popovertarget="ticket"
          popovertargetaction="hide">Close</button>
</div>

<button command="show-modal" commandfor="modal">
  Open the modal
</button>

<dialog id="modal">
  <form method="dialog">
    <p>Focus trapped. Page inert. Esc closes.</p>
    <button value="yes">Yes</button>
    <button value="no">No</button>
  </form>
</dialog>

<details name="rooms" open>
  <summary>Room one</summary>
  <p>Open the next room and I close on my own.</p>
</details>
<details name="rooms">
  <summary>Room two</summary>
  <p>Exclusive. Automatic. Native.</p>
</details>

<button command="show-popover"   commandfor="toast">Show</button>
<button command="hide-popover"   commandfor="toast">Hide</button>
<button command="toggle-popover" commandfor="toast">Toggle</button>

<div id="toast" popover>Invoked. No JavaScript.</div>

<input type="color" value="#ff3d81">

<input type="range" min="0" max="11" list="ticks">
<datalist id="ticks">
  <option value="0"><option value="5"><option value="11">
</datalist>

<input type="date">
<input type="time" value="19:30">

<input list="elements" placeholder="Start typing…">

<datalist id="elements">
  <option value="dialog">
  <option value="details">
  <option value="datalist">
  <!-- … -->
</datalist>

<input required minlength="3" pattern="[a-z0-9-]+">
<input type="email" required>
<input type="number" min="0" max="99">

/* and the styling hooks */
input:user-valid   { border-color: green; }
input:user-invalid { border-color: red; }

<meter min="0" max="100" low="30" high="80"
       optimum="90" value="92">92%</meter>

<progress max="100" value="64">64%</progress>

<!-- no value → indeterminate -->
<progress>loading…</progress>

<audio controls preload="none" src="chiptune.wav">
  Your browser doesn’t do audio? Impressively retro.
</audio>

<p contenteditable="true" spellcheck="true">
  Dear exhibition, I always thought…
</p>

<img src="poster-01.svg" loading="lazy" decoding="async"
     width="800" height="1000" alt="…">

<!-- width & height reserve the space: no layout shift -->

<a href="#treasure">Follow the map</a>

<div id="treasure" hidden="until-found">
  <p>Yahaha! You found me!</p>
</div>

<!-- ⌘F works too: the browser auto-reveals matches -->

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

<a href="#treasure">Take me there</a>