Learn how to create a full-width pop-up in Divi Theme. There’re lots of fancy plugins or paid templates that offer the possibility of creating a pop-up in your Divi website. Those plugins and templates are awesome, and you should probably buy it if this is what you need to finish faster the design you had in mind.

But, if you want to learn a new jQuery trick today – to use for free in all your next Divi website designs – stay tuned and follow along with this Divi theme tutorial.

To achieve this awesome pop-up modal effect, you’ll use animatedModal.js. It is an open source jQuery plugin created by João Pereira that does everything we need. Allied with the power of Animate.css, these partners are everything you’ll need to create – in almost no time at all – a nice and clean full-width modal pop-up for Divi theme.

Let’s start!

Install the jQuery plugin inside your website

First of all, you need to install the animatedModal.js file inside your website. To complete this task, click here to enter his GitHub page and click “Clone or download” green button located on the right part of the page. Then, click Download ZIP.

Secondly, extract the ZIP file and care only for the animatedModal.min.js file. Keep it.

To finish this task, access via FTP your website and go to wp-content/uploads/. Create here a folder called js. Then, paste the file in here. The full path should look like this:

wp-content/uploads/js/animatedModal.min.js

Ok, now you have the jQuery plugin installed in your Divi theme website. Next move.

Add the Animate.css stylesheet inside your website.

Go to Theme Options > Integrations > Add code to the < head > of your blog.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Nice, you have the animations ready. Now, you’ll need to alert the website that an awesome file inside uploads/js is not lost at all – and you’ll need it asap.

Go to Theme Options > Integrations > Add code to the < body >

<script type="text/javascript" src="your-domain-name/wp-content/uploads/js/animatedModal.min.js"></script>

Careful here. Change [your-domain-name] to, for example, http://divi.com so you successfully tell the computer how to find the file and put it at your service.

To finish this task, you’ll need to “activate” the animateModal.js inside your Divi website. You already put the file, told your computer how to find it… now you just need to activate.

Go to Theme Options > Integrations > Add code to the < body >.

Important: add the code below between the tags < script>jQuery code here< /script> (without the spaces). Or, I recommend adding a plugin to handle all the JS inside you website. If you use the plugin, you don’t need to add the <script> tag.

jQuery(document).ready(function( $ ){
$("#modal-1").animatedModal({
modalTarget: "modal-content-1"
});
});

Phew…. I am sure you don’t like “back-end stuff” as much as I do.

Obs: it may look too many steps and hard to learn, but as soon as you install it in 3 or more websites you’ll do this fast.

“Front-end stuff” here we come! Let’s start designing the full-width modal pop-up.

Create your full-width modal pop-up content

01. Create a section > custom CSS > custom ID > modal-content-1

02. Add a button that will activate the modal pop-up

Button > Button URL: #modal-content-1 > Button Text: Open Modal Pop-up > Custom CSS > CSS ID > modal-1

03. Create a button inside the section to close the modal. If you don’t do that, the pop-up will bring a full-width screen that does not have a button to close and it is going to be the end of everything.

Button > Button URL: # > Button Text: Close > Custom CSS > CSS Class > close-modal-content-1

04. Add the content that you want to appear inside this same section you’ve been editing. Here’re some good ideas that are worth creating a full-width modal pop-up:

Contact forms, map module, contact information, book reservations, etc.

That’s it! You should be able to see the full-width modal pop-up working just fine by now.

Update:

Some people are having trouble to make it work properly. Please, double check this points that have helped other users too:

– In my page on Divi, how to create a button who will be the trigger of the pop-up modal?

Please, create a Button Module to the URL: #modal-content-1 and the Custom ID: modal-content-1.

– How and where I will create the pop-up modal and his content?

Just create a section and add the Custom ID: modal-content-1. Don’t forget to set a close button inside this section. Create a Button Module and set the Custom CSS to close-modal-content-1.

Hope you make it work, it’s a little bit tricky, but once learned you can use in all your projects.

After you double checked and it’s still happening, please send me a login info so I can take a look and make it work. It could be a lot of things, as other jQuery plugins may be in conflict with it.

Conclusion

How did you like this tutorial? Did you truly learn how to create a full-width modal pop-up in Divi Theme?

Having this kind of modal pop-up knowledge is a must. You never know when you might need it.

I hope you have easily followed this tutorial, but I’m always open for feedbacks. Please, leave a comment below or send me an email.

Hope to help you somehow.

See ya!