dialog {
  border: none;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  padding: 0;
}
dialog::backdrop {
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
  background-color: rgba(0, 0, 0, 0.6);
}
[open]::backdrop {
  opacity: 1;
}

#content {
  padding: 20px;
}

const updateButton = document.querySelector("#buttonToOpenModal");
const cancelButton = document.querySelector("#cancel");
const dialog = document.querySelector("dialog");

// Update button opens a modal dialog
updateButton.addEventListener("click", function () {
  dialog.showModal();
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", function () {
  dialog.close();
});

dialog.addEventListener("click", function (event) {
  if (!event.target.contains(dialog)) return;
  dialog.close();
})