How To Create WordPress Popup On click In Divi Without Using A Plugin (Updated October 2020!)

There’s a lot of WordPress popup on click plugin available in the market but we since both plugins and themes can be created with different developers, you really can’t avoid plugin incompatibility. In fact, using a lot of WordPress plugins can also bloat your website and you don’t want that to happen for SEO purpose. In this tutorial, I will walk you through how to create a WordPress pop-up on click that will work in all WordPress themes including Divi without using a plugin.

Since my website is made by Divi, we will use its interface as an example to create a perfect WordPress pop up onclick. But if you’re using Elementor then this blog has more accurate step by step tutorial

Modal Popup Demo:

General Rule Of Thumb Illustration of Pop-up On Click

To come-up with onclick pop-up, you need four following elements

• Trigger – This will hold our button and modal
• Container Overlay – This will cover the entire page when the button is click. It will also make your pop-up for visible because the rest of the elements in your window are grey out.
• Pop-up wrapper – a wrapper to hold the elements
• Close icon – you need this trigger to close the pop-up.

Things We Need in WordPress  Popup On Click Modal

1. Code Module: Add a code module into your row, this will be invisible on your website and will only to trigger to be “visible” once the visitors click the button.  Just drag in any part of your Divi row, it should not matter. 🙂 Just make sure that the z-index of the row where you put the code module is higher that any other rows.

1. 1 .) Add a code module to add the html code for the entire pop-up on click.

1.2. ) Inside your code wrapper, add the following html code. In my cases, I added the following classes below:

• see_pricing serve as a connector between the pop-up and the button
• pricing_background serve as container overlay
• pricing_table is your pop-up wrapper
• close_pop will be your close icon

<div class="see_pricing pricing_background">
<div class="pricing_table">
<div class="close_pop">X[close]</div>
Your code here (you can put iframe or embed form)
</div>
</div>

2. Add Button Module –  Don’t forget to add a class name on your button to trigger the modal when click.

Let’s get our hands dirty!

.pricing_background{
display:none;
background:rgba(0,0,0,.65);
z-index: 100000;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}

.pricing_table {
width:50%;
background-color:white;
padding:3%;
z-index: 150000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@media (max-width:768px) {
.pricing_table {
width:90%;
}
}

.close_pop{
cursor: pointer;
padding-bottom: 5%;
font-size: 19px;
text-align: right;
}

Divi Integration Options

Make sure to add opening and closing script when you add it on Divi > Theme Options > Integration > you can add the code below either in body or head section.

<script>
(function($) {$(document).ready(function() {
    
$('.see_pricing').click(function(){
$('.pricing_background').toggle();

});$('.close_pop').click(function(){
$('.pricing_background').display('none');
});
});
})(jQuery)
</script>

Still Confuse? Leave me a message on [email protected]

To learn more WordPress and any Divi tutorials, check out my blog and choose “Divi” button to see all the result related to Elegant Themes tutorials.or you also follow my YouTube channel.