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.
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.
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
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.