Yes you can!

You will need to ”tell” Export Kit how to handle some elements, and use a little bit of CSS and JS to do this directly in Photoshop.

Step 1:

You will need to create a click event, or something to trigger the lightbox. In this case we are using onclick with a custom div. Use our ${class} tag to create the following 2 click events:

${class|div:onclick="open_lightbox()"} open lightbox

${class|div:onclick="close_lightbox()"} close lightbox

These click events will (a) show/hide the lightbox, and (b) prevent the user from click elements under the lightbox.

Step 2:

In Exports Panel > Customize > Custom HEAD, add this:

<style type="text/css">
#lightbox {
     display: none;
     position: fixed!important;
     z-index:99;
     overflow: hidden;
     top: initial!important;
     left: initial!important;
}
#lightbox_bg{
     display: none;
     position: fixed!important;
     top: 0!important;
     left: 0!important;
     width: 100%!important;
     height: 100%!important;
}
</style>
<script type="text/javascript">
function open_lightbox(){
     document.getElementById('lightbox').style.display='block';
     document.getElementById('lightbox_bg').style.display='block';
}
function close_lightbox(){
     document.getElementById('lightbox').style.display='none';
     document.getElementById('lightbox_bg').style.display='none';
}
</script>

This will render the required CSS for the background element and the lightbox container. The logic is the background will (a) fill the screen, aka 100% width and height; and the lightbox will (b) display on top of the background when called.

Note: We are using the ID of the layer in JavaScript for quick reference.

Note: The light box will display AS-IS, meaning the position you place the lightbox in your PSD, is the position it will render on screen.

Eg. You should place your lightbox relative to the top of the PSD design, which will render at the top of the user screen.  If you place your lightbox content too low in your PSD design, the user may need to scroll to see the lightbox content.

Advanced

You can turn the external CSS and JS into a module for use with any PSD project. Watch our virtual scripts tutorial for more details.

Download the PSD template

We included a PSD template file with basic elements to demo a lightbox CSS JS popup.