This is my code in php with Bootstrap to show image in the page .It's Working fine but I want to add pop up image with bootstrap

Question

This is my code in php with Bootstrap to show image in the page which are saved in folder.It's Working fine but I want to add pop up image with bootstrap . Like Bootstrap Modal. Is there any suggestion or might be a code for how to do it...!! Thanks.

<?php
    $path = 'images/gallery/';  // Create initial "Folders" array
    $filetype = '*.*';
    $_POST['type']='all';
    if($_POST['type']!='all'){
        $classloop[] = $_POST['type'];
        $folders[]=ucfirst($_POST['type']);
        $start=0;                            
        $foldercount = count($folders)-1;
    }else{
        if ($dir = opendir($path)) {

            $j = 0;
            while (($file = readdir($dir)) !== false) {

                if ($file != '.' && $file != '..' && is_dir($path.$file)) {
                    $j++;

                    $folders[$j] = $file;
                }

            }
        }
    $classloop = array("","","resort","envato");
    $start=1;
    $foldercount = count($folders);
}
for ($i = $start; $i <= $foldercount ; $i++){
    $folderpath = $path.$folders[$i];
    $images = glob($folderpath."/".$filetype);
    $count = count($images);
    if($count>0){
        for ($j = 0; $j < $count; $j++) {?>
        <?php
            $z = $j%3;

            echo '<div class="'.$folders[$i].' photo-item hover test" style="float:left;position:unset !important;">';
            echo '<a href="'.$images[$j].'" class="image-box">';
            echo '<div class="photo">';
            echo '<span class="text"><span class="anchor"></span></span>';
            echo '</div>';
            echo '<img src="'.$images[$j].'" alt=""  width="260"  height="170"/>';
            echo ' </a></div>';
            echo '<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto">';
            echo '<img src="images/delux.jpg" class="img-responsive" alt="" />';
            echo '</a></div>';
        }
    }else{
        echo '<div align="center" style="width: 100%;">No image(s) found</div>'
    }
}
?>

here is my html code:

<section id="content-area">
<div class="container">
<div class="inner-content">
<h3>Photo Gallery</h3>
<ul id="categories">
<li>
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall1('Resort');" class="Resort active">name1</a>
</li>
<li class="rooms">
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall1('Rooms');" class="Rooms">name2</a>
 </li>
<li>
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall1('Dinning');" class="Dinning">name3</a>
</li>
<li>
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall1('Swiming-Pool');" class="Swiming-Pool">name4</a>
 </li>
<li class="last">
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall1('all');" class="all">View all</a>
</li>
</ul>

<div class="row gallery">
<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto"><img src="images/delux.jpg" class="img-responsive" alt="" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto"><img src="images/delux.jpg" class="img-responsive" alt="" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto"><img src="images/delux.jpg" class="img-responsive" alt="" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto"><img src="images/delux.jpg" class="img-responsive" alt="" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto"><img src="images/delux.jpg" class="img-responsive" alt="" /></a></div>
<div class="col-md-4 col-sm-4 col-xs-6"><a href="#" class="gphoto"><img src="images/delux.jpg" class="img-responsive" alt="" /></a></div>
</div>

</div>
</div>
</section>