Divi Popup: No Plugin Required! [Full Tutorial]

Updated for Divi 5: Divi 5 can now show a popup with no code at all, using Canvases and Interactions, so I added that method first. I also tested the original CSS and jQuery method in Divi 5 and it still works, only the place where you add CSS classes and IDs has moved.

How to create a Divi popup without plugins

You can create a Divi popup without plugins in two ways: in Divi 5, with the built-in Interactions (a button shows a hidden section), or in Divi 4 and Divi 5, with a few lines of CSS and jQuery that turn any section into a full-page overlay.

This is the ultimate guide to creating a Divi popup without plugins. I will show you how to turn any section into a hidden popup that will be displayed after a button click. You will not need any plugins to do this, so we'll keep your website uncluttered and performing great!

If you're using Divi 5, the easiest way is the native one: no code, just a few settings. For the CSS and jQuery method you can choose from 3 ways to achieve this effect, each a different difficulty level. The easiest way is to download the free layout, the second option is to use the free snippets and watch the first 7 minutes of the Divi popup video tutorial, and the most advanced one is to follow the longer step-by-step video guide starting at minute 8 (direct link here). It will teach you how to write this code yourself and help you better understand this effect so you can customize it perfectly.

If you'd like to follow the complete CSS tutorial but want to brush up on your basic CSS skills first, feel free to use my Ultimate Guide for Working with CSS in Divi.

All right, let's get started!

The video was recorded in Divi 4 and shows the CSS and jQuery method. That method still works in Divi 5; the only difference is that in Divi 5 you add CSS classes and IDs in Advanced → Attributes instead of Advanced → CSS ID & Classes.

Want to see it first? Here's the popup demo page.

How to create a popup in Divi 5 with Interactions (no code)

In Divi 5, a popup is simply a section that is hidden when the page loads and shown when someone clicks a button. You set this up with Interactions (Advanced → Interactions), and you can keep the popup section on its own Canvas so it doesn't get in your way while you design the page.

Step 1: Add the popup section

Open the canvas menu at the top left of the Divi Builder (it shows Main Canvas by default) and add a new canvas, for example "Contact Popup". Add a section with your popup content there. You can also add the popup section to the main canvas, at the bottom of the page; it works the same way.

Then open the Section Settings and make it cover the whole screen:

• Advanced → Position: set Position to Fixed and Z Index to 99 (or higher, so it sits above your header).
• Design → Sizing: set Min Height to 100vh.
• Content → Background: pick a color with some transparency, e.g. rgba(0,0,0,0.8), so the page shows through.
• Design → Layout: set Justify Content to Center to center your popup rows vertically.
• Content → Element Label: give it a clear name, e.g. "Contact Popup". You'll pick the section by this name in the next steps.

How the popup appears is set in the section's Design → Animation settings, for example a fade.

Step 2: Hide the popup when the page loads

Still in the popup Section Settings, go to Advanced → Interactions → Add Interaction and set:

• Trigger Event: Load
• Effect Action: Hide Element
• Target Module: the popup section itself (find it by its Element Label)

Divi also prints a small CSS rule for this, so the popup is hidden before any script runs and doesn't flash on page load. In the Builder the section stays visible, so you can still edit it.

Step 3: Open the popup with a button

Add a Button module to your page and leave its Link URL empty. Then go to Advanced → Interactions → Add Interaction:

• Trigger Event: Click
• Effect Action: Show Element (or Toggle Visibility, if the same button should also close it)
• Target Module: your popup section

The trigger doesn't have to be a button. Any module can open the popup: an image, an icon, a blurb, a whole column.

Step 4: Add a close button

Inside the popup, add an Icon module (e.g. an "X" icon) or a Button, and give it one more interaction:

• Trigger Event: Click
• Effect Action: Hide Element
• Target Module: Root Container (the section that holds the close button, which is your popup)

If there's a video in your popup, you don't need any extra code to stop it: when Divi hides an element with an interaction, it pauses video files and reloads YouTube and Vimeo embeds inside it.

That's it: a working Divi 5 popup with no plugins and no code. Two things the native popup doesn't do: it doesn't stop the page behind it from scrolling, and Interactions can't be added to single menu items (they come from your WordPress menu, not from modules). If you need either of these, use the CSS and jQuery method below.

How to create a Divi popup with CSS and jQuery (Divi 4 and Divi 5)

The CSS and jQuery method works in Divi 4 and Divi 5: you add a class and an anchor link to a button, a class and an ID to the popup section, and then one CSS snippet and one jQuery snippet. I tested it in Divi 5.18, and the popup opens, locks the page scroll and closes just like in Divi 4.

Step 1: Create a button trigger

We can use the Divi Button module as a trigger. To make it work, add a custom CSS class of dl-popup-trigger to the button. In Divi 5: Advanced → Attributes → Add Attribute → CSS Class; in Divi 4: Advanced → CSS ID & Classes.

Make sure that the Button Link URL in the Content tab (Content → Link) is an anchor link and uses the ID of the popup section with the hashtag symbol. In our example it's #contact.

Step 2: Create a popup section

Add a new section which will be hidden initially. Make sure to set the correct CSS ID: it needs to match the Button URL from Step 1. In our example the ID is contact (without the hash symbol this time). The section also needs the CSS class of dl-popup-content. In Divi 5 you add both in Advanced → Attributes → Add Attribute (CSS ID and CSS Class); in Divi 4 in Advanced → CSS ID & Classes.

Set the Min Height to 100% in Design → Sizing to make sure the section background stretches to full-screen when the popup is visible.

To add a close button, give any module or row inside the popup the CSS class dl-popup-close. A click on it closes the popup.

Step 3: Add the CSS snippet

Place the CSS code in your Theme Options (Divi → Theme Options → General → Custom CSS) or child theme stylesheet:

/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .dl-popup-wrapper {
  position:fixed;
  z-index:990;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: all .5s cubic-bezier(.14,.06,.41,1.39);
  opacity:0;
  visibility:hidden;
}
body:not(.et-fb) .dl-popup-wrapper.popup-is-visible {
  opacity:1;
  visibility:visible;
}


/* Allow the content inside the popup wrapper to scroll */
.dl-popup-inside {
  height:100%;
  overflow-y: scroll;
}


/* Prevent Body from Scrolling when Popup is visible */
body.dl-noscroll {
  overflow: hidden;
}

/* Center Align Popup Content inside the Section */
.dl-popup-content {
  display:flex;
  flex-direction:column;
  justify-content: center;
}
.dl-popup-content .et_pb_row {
  margin-top:0;
  margin-bottom:0;
}


/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:46px;
  }
}
@media (min-width:783px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:32px;
  }
}

/* Move the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
  z-index:99999;
}

/* Add a hand cursor to the close trigger element */
.dl-popup-close {
  cursor:pointer;
}

/* Add Row animation when popup is triggered */
.dl-popup-wrapper.popup-is-visible .et_pb_row:not(.dl-popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}

Step 4: Add the jQuery code

The jQuery script can be placed inside a Code module directly on your page, or (if it's a functionality you'd like to use globally in various places on your website) inside the Theme Options Integration tab (Divi → Theme Options → Integration → Add code to the < body >). Divi 5 still loads jQuery on the front end, so the script works without changes.

<script>
jQuery(document).ready(function($) {
	
	
	$('.dl-popup-content').each(function(){
		$(this).wrap('<div class="dl-popup-wrapper"><div class="dl-popup-inside">');
	});
		
		
	$('.dl-popup-trigger, .dl-menu-popup > a').off().click(function(e){
		e.preventDefault();
		SectionID = $(this).attr('href');
		$(SectionID).closest('.dl-popup-wrapper').addClass('popup-is-visible');
		$(SectionID).closest('.et_builder_inner_content').addClass('popup-is-visible');
		$('body').addClass('dl-noscroll');
				
	});	
			
	$('.dl-popup-close').click(function(e){
		e.preventDefault();
		$('.popup-is-visible').removeClass('popup-is-visible');
		$('body').removeClass('dl-noscroll');
		
		var PopupVideoIframe = $(this).closest('.dl-popup-content').find('.et_pb_video_box iframe');
		var PopupVideoSrc = PopupVideoIframe.attr("src");
		PopupVideoIframe.attr("src", PopupVideoSrc);
		
		var PopupVideoHTML = $(this).closest('.dl-popup-content').find('.et_pb_video_box video');
		PopupVideoHTML.trigger('pause');
	});


});	
</script>

Besides opening and closing the popup, the script stops a video (Divi Video module) when the popup closes.

How to trigger the popup from the Divi menu

To open a popup from a menu link, use the CSS and jQuery method: add a Custom Link to your WordPress menu with the popup section ID as the URL and the CSS class dl-menu-popup.

Go to Appearance → Menus and add a new menu item using the "Custom Link" block. The URL needs to match the popup section ID (e.g. #contact), and the menu item needs a custom CSS class of dl-menu-popup. If you don't see the CSS Classes field, turn it on in Screen Options at the top of the Menus screen.

This works the same in Divi 5: the Menu module still prints your WordPress menu items with their CSS classes, so the jQuery code from Step 4 finds them.

How to trigger the popup automatically on page load

To open a popup automatically a few seconds after the page loads, add a Load interaction with a Time Delay in Divi 5, or a short setTimeout function to the jQuery code.

In Divi 5 (native popup): select the popup section, go to Advanced → Interactions → Add Interaction, and set Trigger Event to Load, Effect Action to Show Element, Target Module to the popup section itself and Time Delay to 3000ms (3 seconds). Keep the Load → Hide Element interaction from Step 2, too: the popup starts hidden and appears after the delay.

With the CSS and jQuery method: you will need a second jQuery function. Copy the code below and paste it inside the jQuery code from Step 4, right before the last }); line. Replace the #contact with your Popup section ID. You can also replace the 3000 value to define custom delay. 3000 milliseconds is 3s.

setTimeout(function(){
	SectionID = $('#contact');
	SectionID.closest('.dl-popup-wrapper').addClass('popup-is-visible');
	SectionID.closest('.et_builder_inner_content').addClass('popup-is-visible');
	$('body').addClass('dl-noscroll');
}, 3000);

And that's how you add a Divi popup without plugins!

In Divi 5, a popup is a hidden section plus two Interactions (Click → Show Element and Click → Hide Element); in Divi 4, or when you need a menu trigger or scroll lock, the CSS and jQuery snippets do the job in both versions.

I hope you found this tutorial helpful, and I hope everything was clear and accessible. If you use these tips, please let me know in my Divi Lovers Facebook group! Also, which option did you use: the native Divi 5 Interactions, the layout, the snippets, or the long advanced guide? Your feedback is crucial and it helps me see which tutorials work best for you.

If you have any questions, you can ask them in the group too. It's a fantastic community of Divi users and web designers where we share useful tips and tricks.