Member-only story

Featured

How to Close a Modal Dialog?

Should you use a Close/Cancel button, a Close [X] icon, or both?

Saadia Minhas
UX World
4 min readJan 6, 2025

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…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

UX World
UX World

Published in UX World

Stories about user experience and product design | https://uxdworld.com/

Saadia Minhas
Saadia Minhas

Written by Saadia Minhas

UX Design Passionate | Love to share and learn about UX design | https://uxdworld.com/

Responses (8)

What are your thoughts?