JSFiddle - React, Tailwind, and code Playground

by poztin

HTML

<script src="https://rawgit.com/GoogleChrome/dialog-polyfill/master/dialog-polyfill.js"></script>
<link rel="stylesheet" href="https://rawgit.com/GoogleChrome/dialog-polyfill/master/dialog-polyfill.css">
<dialog id="modal">
  <p>Hi, I'm a modal!</p>
  <button id="close">Okay</button>
</dialog>

<button id="show">Show Modal</button>

JavaScript

var modal = document.getElementById('modal');
var showBtn = document.getElementById('show');
var closeBtn = document.getElementById('close');

// Setup an event listener for the show button.
showBtn.addEventListener('click', function(e) {
  e.preventDefault();

  // Show the modal.
  modal.showModal();
});

// Setup an event listener for the close button.
closeBtn.addEventListener('click', function(e) {
  e.preventDefault();

  // Close the modal.
  modal.close();
});

dialogPolyfill.registerDialog(modal);