How to Create a Lightbox

To make it easy for me to create lightbox for any web development projects, I made the simple lightbox function that you can I can easily add and call.

Step 1: Copy the scripts below to your javascript file.

jQuery.fn.smplLightbox = (function(trigger /*, ... */){
$ = jQuery;
id = 'smpl-lb-' + trigger.substr(1);

html = '
<div id="' + id + '" class="smpl-lightbox">
<div class="smpl-lightbox-inner">
<div class="smpl-lightbox-inner2">
<div class="smpl-lightbox-box"><a class="smpl-lightbox-close" href="#">x</a>
<div class="smpl-lightbox-box-inner"></div>
</div>
</div>
</div>
</div>
';

$('body').append(html);
$(this).appendTo('#' + id + ' .smpl-lightbox-box-inner');

$(trigger).attr('rel', id).click(function(){
id = $(this).attr('rel');
$('#' + id).css('display', 'block');
return false;
});

$('#' + id + ' .smpl-lightbox-close').click(function(){

$(this).parents('.smpl-lightbox').css('display', 'none');
return false;
});

css = '#' + id + ' {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8); z-index: 99999; display: none;} .smpl-lightbox-inner { display: table; table-layout: fixed; width: 100%; height: 100%; } #' + id + ' .smpl-lightbox-inner2 { display: table-cell; vertical-align: middle; } #' + id + ' .smpl-lightbox-box { background: #fff; border: 2px solid #aaa; box-sizing: border-box; margin: 0 auto; max-width: 90%; padding: 20px 0 20px 20px; position: relative; } #' + id + ' .smpl-lightbox-box-inner { overflow-y: auto; height: 100%; } #' + id + ' .smpl-lightbox-close { position: absolute; right: 10px; top: 10px; color: #000; font-weight: bold; }';

$('body').append('

');
});

Step 2: Create the contents of your lightbox, e.g:

<div class="mylib">contents here</div>

Step 3: Call the lightbox function.

$jx('.mylib').smplLightbox('#button');

Where .mylib is the class name of your div in Step 2.#button is the id of the trigger. If the user clicks on the trigger, the lightbox will appear.