Add the following code to: Divi -> Theme Options -> Integration -> Add code to the < body >
<script>
jQuery(function($){
var popups =["popup1","popup2"]; //use: ..._button, ..._popup, ..._close
var transition_duration = 0.3; //set in seconds
for (var i = 0; i < popups.length; i++) {
var name = popups[i];
if($("#"+name+"_popup").length >0){
$("#"+name+"_popup").css({
"transition":"transform "+transition_duration+"s ease-in-out 0s",
"transform":"scale(0)"
});
}else{
console.log("#"+name+"_popup is missing");
}
if($("#"+name+"_button").length >0){
$("#"+name+"_button").removeAttr("href");
var localName = name;
$("#"+name+"_button").click(function(){
console.log($("#"+localName+"_popup"));
$("#"+localName+"_popup").css({
"display":"block"
});
setTimeout(function(){
$("#"+localName+"_popup").css({
"transform":"scale(1)"
});
},100);
});
}else{
console.log("#"+name+"_button is missing");
}
if($("#"+name+"_close").length >0){
var localName = name;
$("#"+name+"_close").click(function(){
$("#"+localName+"_popup").css({
"transform":"scale(0)"
});
setTimeout(function(){
$("#"+localName+"_popup").css({
"display":"none"
});
},transition_duration*1000);
});
}else{
console.log("#"+name+"_close is missing");
};
};
});
</script>
Then you need 3 things:
- A button to open the section
- The section you want to use as the popup
- A close button inside of your popup section
Adjust the “var popups =” to whatever you want your popup to be called. In my example I called it “popup1”.
Now you assign IDs to your elements with the following naming convention:
Button ID = popup1_button
Section ID = popup1_popup
Close Button ID = popup1_close
You can add the IDs by going to the Section/Module Settings -> Advanced -> CSS ID & Classes
You can have as many popups as you like on a single page, just make sure to give them unique IDs and define them in the “var popups =”.
To make your section look like a popup, I recommend changing the following settings:
Height: 100vh
Position: Fixed (pinned to the top left)
Visibility -> Vertical Overflow: auto
This way your popup will fill the screen, and will be scrollable independent from the rest of the page.
Lastly you need to hide the popup so it doesn’t show up when you load the page.
For that you simple add the following Custom CSS to the Section:
display: none;