JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<dialog id="modal" class="mx-auto my-0 p-0 border-0 bg-transparent">
    <div class="modal-dialog m-0">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button id="btn-close" type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="text" autofocus="true">
          <input type="text">
        </div>
      </div>
    </div>
</dialog>

<button type="button" id="btn-open" class="btn btn-primary">Open</button>

JavaScript

var btnOpenEl = document.getElementById('btn-open');
var btnCloseEl = document.getElementById('btn-close');
var modalEl = document.getElementById('modal');

btnOpenEl.addEventListener('click', function (e) {
	e.preventDefault();
  modalEl.showModal();
});

btnCloseEl.addEventListener('click', function (e) {
	e.preventDefault();
  modalEl.close();
});