What’s the difference between Modal and Modeless Popups?

When creating Popups or other UI elements, do you often find yourself having to decide between a modal or modeless behavior?

If that’s the case, do you wonder what’s the difference? Even more, which behavior is the right one to choose in each situation?

Let’s find out what is modal and modeless popup behavior and clear the differences, shall we 🙂

In UI design, we call something “modal” when it forces the user to interact with it. A modal popup requires immediate interaction, meaning that you can’t dismiss the popup if you want to continue browsing the website.

For example, when you click on the link below to see modal behavior in action, you will 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 that 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? That is a typical scenario where a modal dialog makes perfect sense.

But, did you notice that Divi also uses some modal dialogs in particular cases? Watch out for it next time you work on one of your pages! For example, such as this one:

modal and modeless example

Modeless

A “modeless” (or “non-modal“) Popup allows you to continue working 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 them simply because they work in the background and do not interrupt the user.

Here is an example of a modeless element in Divis’ Visual Builder, where you don’t have to press the “X” after saving the page, and you can simply continue to work on your layout:

There are two main perspectives when it comes to marketing:

  • Visitors hate modal dialogs
  • Advertisers love them

The truth is, users find them very distracting, simply because they need to stop what they were doing and start interacting with the modal Popup instead.

In fact, 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 the Popup without reading it.

However, users that browse websites sporadically 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.

Now, on the other hand, advertisers love them because they are very effective in grabbing users’ attention, even if it’s only for the fraction of a second.

When a user searches for the close button, they at least scan a few words of the headline or see the teaser image in the Popup. But this comes at a cost: When a web page throws more than one modal Popup at a visitor in a short time, users will become annoyed and by the website as being spammy.

Remember…

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

You should always use modal Popups sparingly, as they are powerful conversion tools.

But be careful! When used too often, they quickly frustrate your visitors, and you might lose some of them as a result.

If you have captivating and unique content on your website, visitors will be more tolerant to those distractions.

Take YouTube for example: YouTube started to include advertisement into many videos (those ads are “modal”, as you cannot ignore them). But still, people watch thousands of hours of videos every day, simply because those videos are unique or hard to find on other platforms.

Popups for Divi for Modal

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

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

However, if you want to keep users engaging with the popup, the Popups for Divi plugin allows you to apply a strict modal behavior by disabling the background click.

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 for Modeless

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

But, there are lots of different types of modeless Popups that 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

So, modal and modeless, which one is the better approach to implement for a powerful marketing tool such as popups?

modal Popup grabs users’ focus and forces them to interact before using the website again.

Yes, it can be frustrating if you overuse modal behavior. But it can result in a better conversion rate than modeless Popups, especially when you want to inform users about something important.

On the other hand, modeless Popups can be either Fly-InsTooltips or inline areas that are displayed without distracting the users’ workflow.

This makes them much more subtle, and thus, less effective when it comes to conversion. Because they don’t annoy visitors as much, you can add multiple modeless Popups to your website at once.

Bottom line, to create various types of modal popups directly with the Visual Builder, you should install the free plugin Popups for Divi.

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