Member-only story
Featured
How to Close a Modal Dialog?
Should you use a Close/Cancel button, a Close [X] icon, or both?
A modal dialog interrupts the flow and requires user action. It does not close until the user provides the required action. The action can be an input or a confirmation from users.
The behavior of a modal dialog requires an important consideration:
“How should a modal dialog be closed?”
We usually interact with modal dialogs every day.
Sometimes we click on a Cancel/Close button to close the dialog. Sometimes, we see a Close [X] icon in the top right corner.

Do they both convey the same meaning?
What is the difference between clicking an explicit Cancel/Close button and a Close [X] icon?
If both are the same, why do we show both of them?
Let’s find the right answer to these questions:
First, make it clear that a modal dialog disables the background interface and cannot be closed by clicking anywhere outside the dialog or using an Esc key.
Both of these behaviors can be used for nonmodal (modeless) dialogs that are informational and do not require user input before they can be closed. However, make sure to…