JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <button id="showDialog">Show the dialog</button>
  <dialog id="favDialog">
  <form method="dialog">
    <p>
      <label>Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
</div>

SCSS

:root {
  --modal-bg: red;
}

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  border: 1px solid #000;
  transform: translate(-50%, -50%);
  &::backdrop {
    --modal-bg: rgba(0,0,0,.3);
    background: var(--modal-bg);
  }
}

JavaScript

const showButton = document.getElementById('showDialog');
const favDialog = document.getElementById('favDialog');
const outputBox = document.querySelector('output');
const selectEl = favDialog.querySelector('select');
const confirmBtn = favDialog.querySelector('#confirmBtn');

// "Update details" button opens the <dialog> modally
showButton.addEventListener('click', () => {
    favDialog.showModal();
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', (e) => {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', () => {
  outputBox.value = `ReturnValue: ${favDialog.returnValue}.`;
});