Modal Window
Modal Window
A window that overlays the current screen and blocks interaction with it until the user completes an action.
In Simple Terms
A modal window is a screen that pops up and covers the current page, prompting you to confirm something or enter information. The underlying page dims and becomes unusable, so you can't move on to your next task until you click a button on the pop-up. It's often used to show important notices or to get final confirmation before deleting data.
Behind the Name
The name combines "modal," meaning related to a mode (a specific state of operation), with "window," referring to a screen or panel. "Modal" implies that the interface has shifted into a particular mode that blocks other actions until you respond. This UI pattern is also sometimes called a "modal dialog."
Take a Closer Look!
A modal window is a small screen that appears in front of the page while you're using a website or app.
While it's displayed, the page behind it is temporarily disabled, which helps focus your attention on the window that just appeared.
Put simply, you can't get back to the underlying page until you respond, such as by clicking a close or OK button. Dimming the entire background also makes it visually clear what you need to do next.
It's built into workflows where you want to prevent mistakes or make sure an important message isn't missed.
In practice, it's widely used for things like confirming a file deletion, agreeing to terms of service, or showing a login screen. On the other hand, if it pops up too often, it interrupts the flow of your work, so it tends to be reserved for genuinely important notifications or decisions.
Another key feature of this pattern is that it lets you complete a task right where you are, without navigating to a different page.