Introduction

Today we are going to show you how to create a pop-up overlay with the Divi Builder without using a plugin. We only use simple Jquery and CSS.

We have recorded an extensive tutorial on this, which I think will be helpful in teaching you jQuery / CSS as well as how to create the pop-up. Alternatively, we have it written down below.

1. Give your button/element a CSS class

The first thing is to give a class name to the element you want to click on that activates the pop-up. In our case we are giving it a class name of “popup”.

Create Pop-Up Divi Add Class Name

2. Add jQuery to target the button

The next step is to add some jQuery in Divi > Theme Options > Integrations > Add code to the < body > section. At first we are just going to check if the jQuery is working by preventing the link action and then alerting us that it has. See the code below

3. Create Pop-Up Section and add CSS classes

The third step is to create the pop-up section and add the modules we want. Add a new section and give it the class name “popup-overlay”, then on the column add the class name “popup-content”. The rest is up to you in terms of design, for the section (overlay) add a background colour. For the column we suggest adding a background colour too such as white and add padding of 40px for example to create spacing between the column and the modules.

Create Pop-Up Divi Add padding

4. Add CSS to overlay

We need to hide the section we just created and make it show when we add the class “show” using jQuery (step 5). We also need to make it fixed so when you scroll it stays, make it the height and width of the screen and position it above all the other sections. Below is the CSS and the explaination of each

5. Add jQuery to add “show” class & show/hide overlay

Finally we want to add the class “show” when you click on the element with the class “popup” (step 1).

We then want to remove the class “popup” when they click on the overlay but not the content. Below is the jQuery used

 

Finialise

That is it! This will now allow you to create a pop-up using the Divi Builder with no plugin. We hope this has been helpful and any questions please ask.

Do NOT follow this link or you will be banned from the site!