What are modals, popups and lightboxes?

When interacting with a website, you generally want to make the experience as seamless and simple as possible. Often, a simple reload of the page can break that seamless flow and other times you simply have information that doesn’t need to be permanently visible, but is still associated with a page.

This is where popups, alerts, modals and lightboxes come in. First, these terms do have roots in specific types of “popup” window situation but they are often used interchangeably in general web conversation. With that in mind, let’s discuss what they are.

Popups

There multiple varieties of popup that are generally built into website. These enhance the user experience. The term popup is a catchall term for anything that appears on your screen over a website.

This is where variety in the terminology often gets blurry. Popup, modal and alert are often used interchangeably. Popups generally cover all of the following types of content overlay…

Alerts

Alerts have been around for a long time in relation to websites. An alert is a little window that appears and will generally prevent you from doing anything on a page until you’ve dismissed it. They don’t need to be dismissed by interacting directly with the mouse and can instead be dismissed by using other keys like esc or enter.

Often used to warn you before submitting something that could make you lose your work.

Modals

In terms of web design a modal is a box that will disrupt a page by overlaying on top of it and prevent interaction – just like an alert. The difference is that modals need direct interaction in order to be dismissed. They will often display a dialog box with a button that can be clicked to dismiss the box.

Dialog

Dialogues are boxes that appear over the content of the page. Dialogues are used to show information and require a response. For example, you could have a dialogue containing a contact form or some text to confirm an action.

Dialogues can be included in a modal. This would mean that the modal prevents interaction with the page while the dialogue provides a means to dismiss the dialogue and modal once interacted with.

Lightboxes

A lightbox is actually a specific Javascript library which has come to be used as a generic term for any popup that darkens the website and displays a dialog containing an image or other content. Often used to display galleries or content that should temporarily take complete focus from the rest of the page.

Generally they can be dismissed with a cross button or by clicking anywhere in the darkened part of the page.

Tooltips & Popovers

Tooltips are small pieces of information that provide additional information when you hover or click on an item. They are small, don’t disrupt the page and generally disappear as soon as you move the cursor away from the trigger.

A classic example of a tooltip is when you hover over a link and the after a short delay a small piece of text appears with enhanced information.

A variation on the tooltip is the popover. These are an element introduced in a lot of modern websites that are a specific kind of tooltip. The major difference is that popovers can be styled to look like the web page they are on and appear when you interact with specific elements of a website. A very common use of these is when you click inside a form field and the popover appears to give advice regarding what you could fill in the field. They are a very handy way of displaying information that isn’t useful to anyone who isn’t intending to interact with a specific element of your site.

How these can be used in modern websites

In modern websites there are any number of ways that the different types of popup could be used. A few examples include:

• Displaying adverts
• Cookie notification banners
• Membership login windows
• Confirmation before submitting a form
• Marketing popups when you are browsing a site for a period of time
• Newsletter signups
• Chat boxes

These are just a few examples of the many ways that popups can be used on a website.

When can these be used incorrectly

When used correctly, they are a powerful tool that can drastically improve the user experience for your website. On the other hand, abusing popups can be infuriating and has become a joke that often refers to virus-ridden computers or websites that contain unsafe content.

On any website, one of the main areas to avoid is the overuse of popups. There is nothing more frustrating than a popup that appears in the middle of an article and breaks your attention away from the reason you were there in the first place and then doesn’t make it easy to dismiss.

A common mistake is to have a popup of this kind that has no easily clickable button to dismiss or a way of dismissing without clicking a button. Often this occurs when a popup is created and designed on a desktop computer with a mouse and not tested for proper functionality on a mobile device where the button ends up too small to interact with.

Modals, popups and lightboxes in WordPress

There are several plugins available for WordPress that don’t require a web developer to write code from scratch, however there are plenty of reasons why, as a website owner, you may want to create your own modal popup.

Without relying on a plugin, creating a modal or popup in WordPress from scratch involves technical knowledge, including HTML, CSS, JavaScript, and potentially PHP.

This hands-on approach allows developers to craft custom modals and popups tailored to the website’s design and functionality. The integration process with WordPress involves enqueuing custom styles and scripts, and ensuring seamless compatibility with the platform’s architecture. While this method demands more technical ability, it provides a level of control and personalisation that suits larger and enterprise scale brands, and companies with specific needs for their website.