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 the 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 add 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'], .et-lb-wrapper {
position:fixed !important;
visibility:hidden;
top:0px;
z-index:999999;
min-height:100%;
transition:all .2s 0s;
width: 100%;
}
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; /* COLOR OF THE CLOSING ICON*/
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');
if ($('body:not(.et-fb-root-ancestor)').has('#et-boc').length) {
$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"]').wrapAll('<div id="et-boc" class="et-lb-wrapper"><div class="et-l"></div></div>')
$('.et-lb-wrapper').appendTo('#et-main-area');
} else {
$('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.
Note, if you don't see the closing icon please change the color of the icon. By default, it's white in color. Modify this line the way you like:
color:#fff; /* COLOR OF THE CLOSING ICON*/
If you need more lightbox sections on the page you can simply assign a 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 the lightbox section that should be opened by the button:
et-lb-content-2