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!

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. By the way, please remove the extra space in the beginner opening and closing <script> below.

< script>
(function($) {$(document).ready(function() {
$(‘.see_pricing’).click(function(){
$(‘.pricing_background, .pricing_table’).css(‘display’,’block’);
});$(‘.close_pop’).click(function(){
$(‘.pricing_background, .pricing_table’).css(‘display’,’none’);
});
});
})(jQuery)
< /script>

Divi Theme Options

Add the following code on Divi > Theme Customizer > Custom CSS

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

display:none;
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;
}

Still confused? Let me know your thoughts.

Share This