I want to display div as popup onclick of anchor tag?

Question

When i click anchor image then display div as popup. here is my code

css code 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;

}

body part

<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"/><a href="#" id="close"class="btnclick" ></a></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 -->