Home / Divi Tips and Tricks / Add easy modal popup boxes in Divi
Divi Tips and Tricks

Add easy modal popup boxes in Divi

Hello guys, Today I am going to teach you to add easy modal popup boxes in Divi. Which you can add any type of content. No 3rd party plugins used here in my tutorial.(I always prefer to avoid installing a lot of plugins in my site for better performance) Just a few lines of CSS plus a simple JavaScript code.

Info: To add custom codes to WordPress sites I always use Simple Custom CSS and JS plugin which you can download from the WordPress repository for free.

Simple Custom CSS and JS

Step One – Create the trigger button to open the modal window

Let’s start by adding the trigger button which will open the modal window. Place it where you want and style the way you like. There are few things you should do. First thing is to add ‘#’ where it asks for the ‘Link‘. otherwise it will refresh the page instead of opening the modal each time you click on the button.

Modal popup boxes in Divi

Then add the ID to the button. ‘myBtn’

Divi Button settings

Ok. now we are done with our first step. Let’s move to the next step and create the modal window.

Step Two – Let’s create modal popup boxes in Divi

To create modal popup boxes in Divi let’s start by adding a new section. In my version, I have added a new section with a one-column row inside.

Modal popup boxes in Divi

This is our Modal window. The section is the dark/dimmed background around the modal window and the Row is the actual modal/popup window. First, go to the section setting and do some styling. Give it a background color of your choice. I added a black color with transparency. Then Design > Sizing and set the height to 100vh which will then take the whole screen height as the modal height. Finally, give it an ID of myModal.

Divi Section settings
Background color
Divi Section settings
section height
Divi Section settings
ID

Next step is to design your actual modal window. You can use any kind of content there. Below is what I did. just a few simple text modules and a button module.

Modal popup boxes in Divi

Still, we need one thing to add there. Right? We need a close button. We can add od it with the visual builder. Let me show you how to do that.

First of all, add a Blurb Module above the title. On the top of the modal content. And delete the title and text and select Use Icon instead of an image. So it will look like something this.

Modal popup boxes in Divi

Now change the icon font color to red and icon font size to something like 30px. Also set icon alignment to the right. Then set Design > Sizing > Content Width to 100%.

Divi Blurb Design Settings

Go to Advanced > Position and set it to Absolute and location to the top right corner. (See the below image.)

Modal popup boxes in Divi

Finally add the class name ‘close’. Thats it for the Modal Window.

Now go back to the Section Setting > Advanced > Position. Set Position to Fixed and Location to the Center. Don’t forget to set the z-index to a higher number depending on your page other content and header. We need to have this section/modal container above all items.

Add easy modal popup boxes in Divi

Step Three – Add JavaScript and CSS

Now we have to add a few lines of CSS and JavaScript to our site to work that modal window. I already told you that my preferred way of adding code to a WordPress site using Simple Custom CSS and JS plugin.

Add a new CSS code and page below snippets.

#myModal {
   display: none;
}
.close {
   cursor: pointer;
}

Then add a new JavaScript file and copy/paste the below code.

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
   modal.style.display = "block";
}
span.onclick = function() {
   modal.style.display = "none";
}
window.onclick = function(event) {
   if (event.target == modal) {
      modal.style.display = "none";
   }
}

Don’t forget to call this JS file in the footer instead header.

Simple Custom CSS and JS

That’s it. The’s the easy way to add popup modal boxes in Divi. With any type of content. Also, I had a post about how to add a popup contact form without any additional plugins before. That’s another way of adding a cool contact form to your site. Below is the link to the post.

How to add a popup contact form in Divi without any plugins

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *