JSFiddle - React, Tailwind, and code Playground

by sanjeevks121

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<a class="gall-info" href="javascript:;">Open Lightbox</a>
<div class="galleryShade">
      <div class="gallFullView">
      <div class="gallFullView-content">
        <div class="gallFullView-text">
        This is title here, This is title here, This is title here, This is title here 
        This is title here, This is title here, This is title here, This is title here 
        This is title here, This is title here, This is title here, This is title here 
        This is title here, This is title here, This is title here, This is title here 
        This is title here, This is title here, This is title here, This is title here 
        </div>
      </div>
      <div class="gallFullView-image">
        <img src="https://image.ibb.co/b2o5BQ/gallery_thumb_10.jpg">
      </div>
    </div>
    </div>

CSS

.gall-info > img {max-width: 100%; display: block; margin-top: 10px;}
  .galleryShade{width: 100%; height: 100%; background-color:rgba(23,24,25,1); z-index: 10000; position: fixed; left: 0; top: 0; display: none;}
  .gallFullView {position: fixed; width: 100%; max-width: 900px; z-index: 99999; top: 50%; left: 0; right: 0; margin-left:auto; margin-right:auto; visibility: hidden; opacity: 0;}
  .gallFullView-content{float: left; width: 30%; color: #fff; font-size: 16px; font-family: Sansita;}
  .gallFullView-image{float: right; width: 70%; background: rgba(98,97,97,0.9);}
  .gallFullView-image > img{max-width: 100%; height: auto; display: block; margin:0 auto;}
  .gallFullView-text{background-color: #000; padding: 20px; line-height: 1.6;}

JavaScript

$(document).ready(function() {  
	  //Open light box on click
	  $(".gall-info").click(function(){
		//show lightbox
		$(".gallFullView").css({"opacity":"1", "visibility":"visible"});
		$(".galleryShade").fadeIn();
		$(".gall-info").css("bottom","0");
		
		//Get the heigh of image
		var gallFullViewImgHeight = $(".gallFullView-image > img").height();
		//Divide the height by 2
		var gallFullViewHalf = gallFullViewImgHeight / 2;
		//Apply the value of above in negative margin top to center the wrapper
		$(".gallFullView").css("margin-top", - gallFullViewHalf);



	  });
	});