How to do div as pop up on click of anchor tag image

<div id="popupdiv">
<div class="col-md-12" style="margin-top: 45px;"> <!--col-md-12 start-->
<div class="col-md-4 displayimg" id="xyz"> <!-- in col-12, 4cols start here -->
<div>
<div id="divzoom" style="cursor: pointer;">
<div id="mainpic" style="width:270px;height:500px; >
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true">
<img id="ContentPlaceHolder1_imgMainImage" class="img-responsive"

src="images/designstyles/a.jpg" height="690" width="500"/></span>
</div>
</div>

</div>
</div> <!-- in col-12, 4cols end here -->
<div class="col-md-1 rtsmobthumb1" id="abc"> <!-- in col-12, 1cols start here -->
<br>
<div class="tn">

<img id="lkj" src="images/designstyles/a.jpg" class="img-responsive rts_img" height="60"

width="55" />



<img id="mno" src="images/designstyles/b.jpg" class="img-responsive rts_img" height="60"

width="55" />


<img id="ghi" src="images/designstyles/c.jpg" class="img-responsive rts_img" height="60"

width="55" />



<img id="pqr" src="images/designstyles/d.jpg" class="img-responsive rts_img" height="60"

width="55" />

</div>

</div> <!-- in col-12, 1cols end here -->
</div><!-- in div dialog -->
css for anchor tag
#close {
display: block;
position: absolute;
width:20px;
height:30px;
top:10px;
right: 30px;
background: url(images/designstyles/search.png);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 100;
padding: 5px 2px 2px;
}