Converting sections to popups in Divi

by

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:

  1. A button to open the section
  2. The section you want to use as the popup
  3. 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;