JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cpoutter">
    <div class="cplightbox">
        <div class="cplightboxclose"></div>
        <div class="cplightbox1"></div>
    </div>
</div>
<a href="http://www.google.com/images/srpr/logo4w.png"><img src="http://www.google.com/images/srpr/logo4w.png" /></a>

<a href="http://www.bing.com/az/hprichbg/rb/IledOlonneSalt_ROW9113926693_1366x768.jpg"><img src="http://www.bing.com/s/a/hpc8.png"/></a>

CSS

.cplightbox {
     position:fixed;
     top:50%;
     left:50%;
     display:inline-block;
 }
 .cplightbox1 {
     background-color:#FFF;
     padding: 5px;
 }
 .cplightbox1 img {
     cursor:pointer;
     max-width:440px;
     max-height:380px;
 }
 .cpoutter {
     position:fixed;
     top:0px;
     left:0px;
     filter:alpha(opacity=0);
     /* for IE */
     opacity: .0;
     width:100%;
     height:100%;
     background:rgba(204, 204, 204, 0.5);
     z-index:70;
     display:none;
     text-align:center;
 }

JavaScript

jQuery("img").click(function () {
     var img_path;
     if ($(this).parent('a').length) {

         img_path = $(this).parent('a').prop('href');
     } else {
         img_path = $(this).attr('src');
     }

     jQuery(".cplightbox1").html(jQuery("<img>").attr("src", img_path));
     jQuery(".cpoutter").css('display', 'block');
     jQuery('.cpoutter').animate({
         'opacity': '1'
     });

     var cplightbox = document.getElementsByClassName('cplightbox')[0];
     var cplightbox1 = document.getElementsByClassName('cplightbox1')[0];
     var cpoutter = document.getElementsByClassName('cpoutter')[0];

     // Sometimes cplightbox1 width/height returns 0, if so, fallback and use the containing div
     if ($(cplightbox1).width() > 0 && $(cplightbox1).height() > 0) {
         cplightbox.style.marginLeft = "-" + $(cplightbox1).width() / 2 + "px";
         cplightbox.style.marginTop = "-" + $(cplightbox1).height() / 2 + "px";
         console.log(1);
         console.log($(cplightbox1).width());
         console.log($(cplightbox1).height());
     } else // Something was 0 (width or height), so try and grab them from the containing div
     {
         setTimeout(function () {
             cplightbox.style.marginLeft = "-" + $(cplightbox1).width() / 2 + "px";
             cplightbox.style.marginTop = "-" + $(cplightbox1).height() / 2 + "px";
             console.log(2);
             console.log($(cplightbox1).width());
             console.log($(cplightbox1).height());
         }, 100)
     }


     return false;
 });
 jQuery(".cpoutter").click(function () {
     jQuery(".cpoutter").stop().fadeOut('medium');
 });