Modal Window

A modal window is one that appears in front of a window and deactivates the page content. It disables user interaction with the main window while keeping it visible.

To return to the original window, the user will have to engage with a modal window, ensuring attention to an important action or piece of information. Modal windows are one of the ways UI UX designers direct user focus in a specific direction.

Modal Window Design

A modal window design is typically made up of simple UI design elements such as header, footer, body, and CTA. They are designed using a combination of CSS, Javascript, and HTML.

There are various ways in which it can manifest on your screen. Some of these ways include-

• Fullscreen Window - This type of modal window uses the full width of the window.
• Lightbox - It displays an image or video without exiting the original window.
• Draggable - This window can be moved by dragging it via its header.
• Action Confirmation - These are modal windows used to confirm a user action.

Difference Between Modal Window and Popup Window

A modal window and a popup window both appear on top of the original window you are accessing. The major difference between the two lies in the level of user interaction required by each.

A modal window requires a higher degree of user interaction. They disable the original window unless you engage with them. On the other hand, popup windows require less user interaction. They allow you to navigate the original window and are normally used to show marketing material. They only go away when you click on them but don’t interrupt how you use the original window.

Note: All information and/or data from external sources is believed to be accurate as of the date of publication.