Popovers and Dialogs

Unlike popovers, you must use Javascript to interact with dialog elements.

By using the showModal method, the rest of the page becomes inactive.

// The following code is used to enable the dialog.
// If you change the ids of the elements, then this example won't work.

function initDialogForm() {
  const dialogForm = document.getElementById("dialogForm");
  const select1 = document.getElementById("select1");
  const confirmBtn = document.getElementById("confirmBtn");

  // Prevent the "confirm" button from the default behavior of submitting the form,
  // and close the dialog manually.
  
  confirmBtn.addEventListener("click", (event) => {
    event.preventDefault(); 
    dialogForm.close(select1.value); // Have to send the select box value here.
  });  
}