Adding a Light Box to Divi

In this video, I show you how to add a Video LightBox to any page on your site. We put the video together quickly, so there are a couple of mistakes, but correcting those mistakes might also be helpful to see.

The Class used for the Light Box is .OCLightBox

The ID used for the clickable object is .OCButton

The code is below the video.

Text for the Close Link Text Module

<p style="text-align: right;"><a href="#" onclick="jQuery(this).popupClose();">Close</a></p>

The CSS

Here is the CSS to add to your Custom CSS Section at the bottom of Divi -> Theme Options…

/* set up the lightbox area */
.page .et_pb_section.OCLightBox {
 position: fixed;
 top: 0;
 left: 0;
 display: none;
 box-sizing: border-box;
 min-height: 100vh;
 min-width: 100vw;
 z-index: 999999;
 padding-top: 5vh;
 padding: 5vh 10vw 10vh;
}

/* Make the Lightbox visible when it is open */
.page .et_pb_section.OCLightBox.popup-open,
.page.popup-open {
 display: block;
 overflow: hidden; /* removes scrollbar */ 
}

The Code Module

This is the Code for the Code Module at the bottom of your page…

<script>
jQuery(document).ready(function(){
 jQuery(".page").on("click", "#OCButton", function(){
event.preventDefault();
 jQuery( ".page" ).addClass( "popup-open" ).fadeIn(2000);
 jQuery( ".OCLightBox" ).addClass( "popup-open" ).fadeIn(400);
 });

jQuery.fn.popupClose = function() {
event.preventDefault();
 jQuery( ".page" ).removeClass( "popup-open" )
 jQuery( ".OCLightBox" ).removeClass("popup-open");
 return this;
 };
});
</script>