What’s the difference between Modal and Modeless Popups?

When creating Popups or other UI elements, you often need to decide between a modal or modeless behavior. But what is the difference? And which behavior is the right one in each situation?
Let’s find out 🙂

In UI design, we call something “modal” when it forces the user to interact with it. For example, click the link below to see modal behavior in action – notice that you cannot click anywhere or scroll the page while the modal box is visible:

Open Modal Demo

A modal Popup is very likely to interrupt your visitors’ workflow and distract them. In traditional software development, those dialogs were used to get the users’ confirmation before proceeding with an action.

Say, you wrote a text document in Word and then quit without saving it: The application needs a confirmation before taking any action. Was it an accident or did you intend to discard the draft? This is a typical scenario where a modal dialog makes perfect sense.

Did you notice that Divi also uses some modal dialogs in some cases? Watch out for it next time you work on a page! For example this one:

Modeless

A “modeless” (or “non-modal“) Popup allows you to continue your work without interacting with the Popup. The modern standard for software- and web development is, to keep everything modeless unless it’s really needed.

Open Modeless Demo

Modeless dialogs are very common in today’s web applications (like WordPress and Divi), but people rarely take notice of them because they keep in the background and do not interrupt the user.

Here is an example of a modeless element in Divis’ Visual Builder – you do not need to press the “X” after saving the page, you can simply continue to work:

In Marketing

When it comes to marketing there are two perspectives: Visitors hate modal dialogs. Advertisers love them.

Users find them very distracting, as they naturally require them to stop what they were doing and interact with the modal Popup. However, modal dialog boxes are so common in blogs and websites nowadays that regular online users have developed a kind of “Popup blindness” and simply close a modal Popup without reading it. Users that less frequently browse websites are often overwhelmed and distracted by those Popups. In turn, they are a lot more likely to bounce back to google or simply close your site.

Advertisers love them, because they are very effective in grabbing the uses’ attention – and if it’s only for the fraction of a second. When a user searches for the close button, they at least will scan a few words of the headline or see the teaser image in the Popup. This comes at a cost: When a web page throws more than one modal Popup at a visitor in a short time, your user will become annoyed and put off your website as being spammy.

Remember…

Remember, with great power comes great responsibility
Maybe it was not Yoda who said it … but I like Yoda 🙂

Always use modal Popups sparingly, as they are powerful conversion tools. When used too often, they quickly frustrate your visitors, and you might lose some of them.

If you have captivating and unique content, your visitors are more tolerant to those distractions – take YouTube for example: YouTube started to built advertisement into many videos (those ads are “modal”, as you cannot ignore them). But people still watch thousands of hours of their videos every day, simply because those videos are unique or hard to find on other platforms.

Popups for Divi

All Popups that you create in Popups for Divi are modal: They cover the screen and prevent the page from scrolling until the visitor closes the Popup again. Here is the most basic version of such a Popup.

The Popup has a close button in the top right corner. But also notice how you can close the Popup by clicking on the background overlay – I call this behavior “soft modal” where the user can very quickly close it by clicking anywhere.

The Popups for Divi plugin offers you to apply a strict modal behavior, by disabling the background click. Those are the most annoying, but also the best converting type of Popup.

Popups for Divi settings panel with the strict-modal setting

Popups for Divi is a free plugin that allows you to create Popups right inside Divis Visual Builder, using all the Modules and styles that you use on the rest of your website.

If you use Divi, then Popups for Divi is an essential plugin to create better websites

Install it today – it’s free (also ad-free!)

Divi Areas Pro

With our free plugin, you can create modal Popups with ease. And as mentioned above, those are one of the most powerful marketing tools you have.

Different types of modeless Popups can be created with our premium plugin Divi Areas Pro:

Fly-Ins stick to either side of the screen while the visitor keeps reading the page
Hover Areas display Divi Sections like a tooltip and do not force the user to interact.
Inline Areas can be inserted at any position on your page – in this screenshot we replaced the comment section with a notification text for logged-out users.

Conclusion

Popups of any type are flexible and effective marketing tools.

A modal Popup instantly grabs your users focus and forces them to handle it, before using your website again. This can be frustrating for visitors if you overuse modal behavior. However, modal Popups have a far better conversion rate than modeless Popups.

Modeless Popups can be either Fly-Ins, Tooltips or inline areas that are displayed without distracting the users’ workflow. This makes them much more subtle, and therefore also less effective when it comes to conversion. Because they don’t annoy visitors so much, you can safely add multiple modeless Popups to your website at once.

On a WordPress website that uses the Divi theme, you should install the free plugin Popups for Divi. It allows you to create different types of modal Popups directly in the Visual Builder.

To create modeless Popups, we have built the premium plugin Divi Areas Pro, which greatly enhances the features of Popups for Divi. You can read more about it here.