showModal custom dialog box

from https://www.makeuseof.com/build-modals-easily-with-the-html-dialog-element/

by Andy Bulka

HTML

<div class="button-container">
  <button>
    File import dialog...
  </button>
</div>
<dialog>
  <div>
    Are you sure you want to do this?
  </div>
  <div>
    <button class="close">
      Yes
    </button>

    <button class="close">
      No
    </button>
    
    <input type="file" id="file-uploader">

    <div>
      <input type="checkbox" id="fred">
      <label for="fred">Import unrecognised chords</label>
    </div>
    
  </div>
</dialog>

CSS

dialog::backdrop {
  background: green;
  opacity: 0.5;
}

button {
  border-radius: 2px;
  background-color: white;
  border: 1px solid black;
  margin: 5px;
  box-shadow: 1px 1px 2px grey;
}

dialog {
  max-width: 90vw;
  border: 1px solid red;
}

JavaScript

const modal = document.querySelector("dialog")
document.querySelector(".button-container button").addEventListener("click", () => {
  /* modal.show() */;
  modal.showModal();
});
const closeBtns = document.getElementsByClassName("close");
for (let btn of closeBtns) {
  btn.addEventListener("click", () => {
    modal.close();
  })
}