Select Page

How To Create Onclick Popup Modal In Divi Without Using A Plugin

Choosing a modal way of creating a popup on your Divi might be the perfect fit if you don’t want to get in trouble with plugin compatibility. In this Divi 01 tutorial, I’m going to walk you through how to create a perfect modal for your Extra and Divi website.

Modal Popup Demo:

 

Things We Need in Creating A Modal

 

Code Module:

Simply add a classed for your row and section to serve as your popup container and popup box.

In my case, I added a class name pricing_table on my code module and pricing_background for section module.

Don’t forget to add a class name on your button to trigger the modal when click.

button module

Let’s get our hands dirty!

Copy the code below and paste it to the respective section. 

  • Click the CSS tab and paste it to Divi > Theme Customizer > Custom CSS
  • Select the JS tab > copy & paste > go to Divi > Theme Options > Integration > Add it either in <head> or <body> section.

PS: Don’t forget to add the opening and closing script. The reason why I commented it down because Codepen doesn’t allow you to add <script> since we’re already using JS file.

See the Pen
Pop-UP
by Angelic Sanoy (@angelicsanoy)
on CodePen.

 

Still confused? Let me know your thoughts.