CodingNic

Custom Modals

Cancel and Close the Modal

Custom Modals 8 min read

Cancel and Close the Modal

Cancel and Close the Modal

A modal should have a clear way out without changing the task.

Connect the prepared Cancel button to a close function:

javascript
function closeEditModal() {
  document.getElementById("edit-modal-backdrop").hidden = true;
  editingTaskId = null;
}

document.getElementById("modal-cancel").addEventListener("click", closeEditModal);

Also allow clicking the backdrop to close the modal when the click lands outside the dialog:

javascript
document.getElementById("edit-modal-backdrop").addEventListener("click", (event) => {
  if (event.target === event.currentTarget) {
    closeEditModal();
  }
});

The prepared interface also supports keyboard handling. Keep the modal close behavior consistent with the existing structure rather than adding a second modal system.

Checkpoint: Canceling or closing the modal leaves the original task unchanged.