JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<div class="container">

  <h1>The dialog element</h1>

  <p>Choose a <code>&lt;dialog&gt;</code> type to show:</p>
  <div id="controls">
    <button id="none-btn"><code>closedby="none"</code></button>
    <button id="closerequest-btn">
      <code>closedby="closerequest"</code>
    </button>
    <button id="any-btn"><code>closedby="any"</code></button>
  </div>

  <dialog closedby="none">
    <h2><code>closedby="none"</code></h2>
    <p>
      Only closable using a specific provided mechanism, which in this case is
      pressing the "Close" button below.
    </p>
    <button class="close">Close</button>
  </dialog>

  <dialog closedby="closerequest">
    <h2><code>closedby="closerequest"</code></h2>
    <p>Closable using the "Close" button or the Esc key.</p>
    <button class="close">Close</button>
  </dialog>

  <dialog closedby="any">
    <h2><code>closedby="any"</code></h2>
    <p>
      Closable using the "Close" button, the Esc key, or by clicking outside the
      dialog. "Light dismiss" behavior.
    </p>
    <button class="close">Close</button>
  </dialog>

</div>

CSS

html,body {
  background: #202020;
  color: #F9F9F9 !important;
}

input, textarea, button {
  color: inherit;
}

dialog {
  border: 1px solid #CCCCCC;
  background: #F9F9F9;
  border-radius: 5px;
}

JavaScript

const noneBtn = document.getElementById("none-btn");
const closerequestBtn = document.getElementById("closerequest-btn");
const anyBtn = document.getElementById("any-btn");

const noneDialog = document.querySelector("[closedby='none']");
const closerequestDialog = document.querySelector("[closedby='closerequest']");
const anyDialog = document.querySelector("[closedby='any']");

const closeBtns = document.querySelectorAll(".close");

noneBtn.addEventListener("click", () => {
  noneDialog.showModal();
});

closerequestBtn.addEventListener("click", () => {
  closerequestDialog.showModal();
});

anyBtn.addEventListener("click", () => {
  anyDialog.showModal();
});

closeBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.parentElement.close();
  });
});