<dialog> — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Native &lt;dialog&gt; in action</h1>
    <p class="pg-sub">
      Open a modal, try closing it three ways, and watch what <code>returnValue</code> captures.
      No libraries. No focus-trap code. No Escape handler.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Configure the backdrop</div>
      <fieldset>
        <legend>dialog::backdrop</legend>
        <div class="option-row">
          <label>
            Opacity
            <input type="range" id="backdropOpacity" min="10" max="80" step="5" value="50" style="width:100px" />
            <span class="mono" id="opacityOut">50%</span>
          </label>
        </div>
        <div class="option-row">
          <label>
            <input type="checkbox" id="backdropBlur" />
            backdrop-filter: blur(6px)
          </label>
        </div>
        <div class="option-row">
          <label>
            <input type="checkbox" id="backdropClick" checked />
            Close on backdrop click
          </label>
        </div>
      </fieldset>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Open the dialog</div>
      <div class="demo-area">
        <div class="trigger-row">
          <button class="primary-btn" id="openModal">Open as modal (showModal)</button>
          <button class="secondary-btn" id="openNonModal">Open non-modal (show)</button>
        </div>
        <p class="hint">
          <strong>Modal</strong> blocks the rest of the page — Tab stays inside, Escape closes it, the backdrop appears.<br>
          <strong>Non-modal</strong> is just visible — you can still click outside and Tab freely.
        </p>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Close result</div>
      <div class="result-row">
        <span class="result-label">returnValue →</span>
        <span class="result-val" id="returnValDisplay">—</span>
      </div>
      <div class="result-row" style="margin-top:6px">
        <span class="result-label">closed via →</span>
        <span class="result-val" id="closeMethodDisplay">—</span>
      </div>
      <div class="event-log" id="log" aria-label="Event log" aria-live="polite">
        <span class="log-row"><span class="log-info log-msg">Events will appear here as you interact with the dialog…</span></span>
      </div>
    </div>
  </div>

<dialog id="demo">
    <div class="dialog-inner">
      <h2 class="dialog-title">Are you sure?</h2>
      <p class="dialog-body">
        This confirms a delete. Try closing with the buttons below,
        pressing <kbd>Escape</kbd>, or clicking the backdrop.
        Check what <code>returnValue</code> captures each way.
      </p>
      <div class="dialog-footer">
        <button class="secondary-btn" id="cancelBtn">Cancel</button>
        <button class="primary-btn" id="confirmBtn">Confirm delete</button>
      </div>
    </div>
  </dialog>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.

&lt;dialog&gt; — interactive playground

<dialog> — interactive playground