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:
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:
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.