How To Create Onclick Pop-up Using Elementor For FREE

Lately, I created a tutorial for onclick pop-up exclusively for Divi users. Actually, the tutorial is applicable in all themes but I decided to come-up with a different series exclusively for Elementor users so you won’t get confuse with the interface.

Again, if you want to see the how to create an onclick tutorial pop-up for Divi without using a plugin, feel free to check the other blog here

Step 1: Go to your Elementor search box and look for HTML code

Add the following code below to create a pop-up element.

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

Step 2: Add a button element – keep the link empty and add a text for your onclick pop-up button

Then go to advanced tab and add the class name called .see_pricing

Let’s get our hands dirty!

Add the following CSS and Javascript code to your theme options. If you’re using an elementor Pro, you can add the custom css and javascript in the Integration options.  Otherwise, you can also install a plugin called “Simple Custom CSS and JS”

CSS Code:

.see_pricing {cursor:pointer;}
.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;
}

Javascript/Jquery Code:

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