Divi Popup or Lightbox for any Section Row or Module

Today, we’re going to show you how to take Divi’s lightbox functionality and use it to display a Divi popup of sections, rows, and modules.

The Divi page builder already comes with a lightbox, and you can see examples of this in image and gallery modules.

With just a bit of jQuery code and CSS, we’ll be taking what Divi already has the power to do, and use it to create customized popups to display opt-in forms, call-to-actions, messages, images, videos, tabs, login modules, whole rows and sections, shortcodes, literally anything!

The best part is how easy it is to implement. 

Examples

Trigger the Lightbox with any link

Example:

<a href=”#” class=”lightbox-trigger-8″>Click Here</a>

Divi Popup Hack in a Nutshell

1. Create your trigger element (button, CTA, image, blurb, etc) and add the class lightbox-trigger

2. Create the Divi popup content (any section, row, or module) and add the class lightbox-content

Done! Pretty simple, right?

Keep on reading and we’ll walk you through it.

  Since Divi already has the lightbox functionality, we just need to enable the classes that we’ll be using.

The first thing we need to do is add the jQuery and CSS.

Copy and paste the following script into the head of your website.

<script type="text/javascript">
jQuery(document).ready(function($) {
$('.lightbox-trigger').magnificPopup({ items: { src: '.lightbox-content', type: 'inline' } }); $('.lightbox-trigger-1').magnificPopup({ items: { src: '.lightbox-content-1', type: 'inline' } }); $('.lightbox-trigger-2').magnificPopup({ items: { src: '.lightbox-content-2', type: 'inline' } }); $('.lightbox-trigger-3').magnificPopup({ items: { src: '.lightbox-content-3', type: 'inline' } }); $('.lightbox-trigger-4').magnificPopup({ items: { src: '.lightbox-content-4', type: 'inline' } }); $('.lightbox-trigger-5').magnificPopup({ items: { src: '.lightbox-content-5', type: 'inline' } }); $('.lightbox-trigger-6').magnificPopup({ items: { src: '.lightbox-content-6', type: 'inline' } }); $('.lightbox-trigger-7').magnificPopup({ items: { src: '.lightbox-content-7', type: 'inline' } }); $('.lightbox-trigger-8').magnificPopup({ items: { src: '.lightbox-content-8', type: 'inline' } }); $('.lightbox-trigger-9').magnificPopup({ items: { src: '.lightbox-content-9', type: 'inline' } }); $('.lightbox-trigger-10').magnificPopup({ items: { src: '.lightbox-content-10', type: 'inline' } }); $('.lightbox-content, .lightbox-content-1, .lightbox-content-2, .lightbox-content-3, .lightbox-content-4, .lightbox-content-5, .lightbox-content-6, .lightbox-content-7, .lightbox-content-8, .lightbox-content-9, .lightbox-content-10').addClass('mfp-hide');
});
</script>
   Copy and paste the following CSS into the Custom CSS box.
/****** Lightbox Styling *******/ 
.lightbox-trigger,.lightbox-trigger,.lightbox-trigger-1,.lightbox-trigger-2,.lightbox-trigger-3,.lightbox-trigger-4,.lightbox-trigger-5,.lightbox-trigger-6,.lightbox-trigger-7,.lightbox-trigger-8,.lightbox-trigger-9,.lightbox-trigger-10 { cursor:pointer; }
.lightbox-content,.lightbox-content-1,.lightbox-content-2,.lightbox-content-3,.lightbox-content-4,.lightbox-content-5,.lightbox-content-6,.lightbox-content-7,.lightbox-content-8,.lightbox-content-9,.lightbox-content-10 { position:relative; }
.lightbox-content .mfp-close,.lightbox-content-1 .mfp-close,.lightbox-content-2 .mfp-close,.lightbox-content-3 .mfp-close,.lightbox-content-4 .mfp-close,.lightbox-content-5 .mfp-close,.lightbox-content-6 .mfp-close,.lightbox-content-7 .mfp-close,.lightbox-content-8 .mfp-close,.lightbox-content-9 .mfp-close,.lightbox-content-10 .mfp-close { color:inherit !important;}
.lightbox-content .mfp-close:active,.lightbox-content-1 .mfp-close:active,.lightbox-content-2 .mfp-close:active,.lightbox-content-3 .mfp-close:active,.lightbox-content-4 .mfp-close:active,.lightbox-content-5 .mfp-close:active,.lightbox-content-6 .mfp-close:active,.lightbox-content-7 .mfp-close:active,.lightbox-content-8 .mfp-close:active,.lightbox-content-9 .mfp-close:active,.lightbox-content-10 .mfp-close:active { top:0px !important;}
   Set the Trigger Element by adding lightbox-trigger as a class name of the element you want to be the trigger. In this example, I’ve added it to a button module.
   Now create the section, row, or module that you want to show inside the Divi popup or lightbox anywhere on the same page. (This element will be hidden by default when viewing the page, but will remain visible in visual builder).

Set the Divi popup or lightbox content by adding lightbox-content as a class name of the element you want to be inside the lightbox or popup. In this example, a CTA module.

Adding Multiple Lightboxes

Now, if you want to add multiple popups on the same page, just add a -1, -2, -3 and so on (to -10) after each class name.

Get this Divi popup hack plus hundreds of other CSS and jQuery hacks that power up your Divi website

Done!

Give this page a share, like, or comment if this worked for you! Leave a comment if you have a question or want to share some love 😀