HTMLDialogElement: phương thức requestClose()

requestClose()
requestClose(returnValue)

<dialog id="dialog">
  <div>
    <label><input type="checkbox" id="prevent-close" /> Hủy đóng</label>
  </div>
  <button type="button" id="close">Đóng</button>
  <button type="button" id="close-w-value">Đóng kèm giá trị trả về</button>
</dialog>

<button id="open">Mở hộp thoại</button>

<pre id="log"></pre>

#log {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
const closeWithValueButton = document.getElementById("close-w-value");
const preventCloseInput = document.getElementById("prevent-close");

// Nút mở mở một hộp thoại modal
openButton.addEventListener("click", () => {
  // Đặt lại giá trị trả về
  dialog.returnValue = "";
  // Hiển thị hộp thoại
  dialog.showModal();
});

// Nút đóng đóng hộp thoại
closeButton.addEventListener("click", () => {
  dialog.requestClose();
});

// Nút đóng đóng hộp thoại với giá trị trả về
closeWithValueButton.addEventListener("click", () => {
  dialog.requestClose("some value");
});

// Được kích hoạt khi requestClose() được gọi
// Ngăn hộp thoại đóng bằng cách gọi event.preventDefault()
dialog.addEventListener("cancel", (event) => {
  if (preventCloseInput.checked) {
    log("Đã hủy đóng hộp thoại");
    event.preventDefault();
  }
});

// Sự kiện cancel không bị ngăn, hộp thoại sẽ đóng
dialog.addEventListener("close", () => {
  log(`Hộp thoại đã đóng. Giá trị trả về: "${dialog.returnValue}"`);
});