In this article you'll learn how to create a similar effect that you can see in the screencast below:

By default only a few modules allow opening the content in a lightbox, such as the Gallery module and the Image Module. If you want to open other modules you can apply the solution posted below. 

First of all, add a separate section for the content that you want to open in a lightbox. This section will be hidden by default and will appear only when you click a button, though the section will be always visible under the Divi Builder so you can modify it the way you need.

Next, assign et-lb-content-1 CSS Class name to the section.

You can apply a semi-transparent background to the section and other styles, like you normally do when you modify any other Divi modules. In my case I defined gray semi-transparent color for the section. The section will expand fullscreen when opened. 

Now, you need to add a button, so when you click it will open the section as a lightbox window. 

The important thing is that the button should not be located in the same section where you added the content for the lightbox. Let's add a new section for the button module, define et-lb-btn-1 class and # placeholder link as you can see below:

The last thing we need to do is adding the necessary CSS and JS under the theme options. Add the following code to the Custom CSS field under WP admin / Theme Options / General Settings:

body:not(.et-fb-root-ancestor) [class*='et-lb-content'] {
position:fixed;
visibility:hidden;
top:0px;
z-index:999999;
min-height:100%;
transition:all .2s 0s;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content'] .et_pb_row {
position:relative;
top:50px;
}
.et-lb-open {
visibility:visible!important;
width:100%;
}
span.et-lb-close {
font-size:46px;
right:-1vw;
margin-top:-51px;
display:block;
color:#fff;
padding:10px;
cursor:pointer;
font-weight:bold;
font-family:etmodules;
z-index:99999999999999;
position:absolute;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content']:not(.et-lb-open) {
transform:scale(.3);opacity:0;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-btn'] {
cursor:pointer;
}


Also, add the following JS code under the WP admin / Theme Options / General Settings / Integration tab / Head section:

<script>
(function($) {
  $(document).ready(function() {
$('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"]  > .et_pb_row:first-child');
$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
    $("[class*='et-lb-btn']").each(function(index, element) {
      var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
      if (classes !== null) {
          $(element).on('click', function(e){
            e.preventDefault();
            $('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
          });
 $('.et-lb-close').click(function(){
 $("[class*='et-lb-content']").removeClass('et-lb-open');
 });
      }
    });
  });
})(jQuery);
</script>


That's it. If you need more lightbox modules on page you can simply assign number to the appropriate css classes. For example if you add a second lightbox form then for button CSS Class add: 

et-lb-btn-2

and for lightbox section that should be opened by the button:

et-lb-content-2

Did this answer your question?