JSFiddle - React, Tailwind, and code Playground

by VermaPrashant

HTML

<button id="openDialog">Open Dialog</button>

<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>This is the content of the dialog box.</p>
  <button id="closeDialog">Close</button>
</dialog>

JavaScript

const openDialogButton = document.getElementById('openDialog');
  const closeDialogButton = document.getElementById('closeDialog');
  const myDialog = document.getElementById('myDialog');

  openDialogButton.addEventListener('click', () => {
    myDialog.showModal(); // Display the dialog
  });

  closeDialogButton.addEventListener('click', () => {
    myDialog.close(); // Close the dialog
  });