我想在bootstrap和php中获得图像的弹出窗口

这是我通过PHP和Bootstrap为图像库编写的代码。它的工作很好，但我想得到弹出窗口的图像时，用户点击该特定的图像。我可以在这段代码中添加任何功能吗

提前谢谢

<h3>Photo Gallery</h3>
<ul id="categories">
<li>
<a href="javascript:void(0);" data-filter=".resort" onClick="makeCall('Resort');" class="Resort active">1</a>
</li>
<li class="rooms">
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall('Rooms');" class="Rooms">2</a>
 </li>
<li>
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall('Dinning');" class="Dinning">3</a>
</li>
<li>
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall('Swiming-Pool');" class="Swiming-Pool">4</a>
 </li>
<li class="last">
<a href="javascript:void(0);" data-filter=".beach" onClick="makeCall('all');" class="all">View all</a>
</li>
</ul>

<div class="row gallery gallery-section" id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
  <?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;">';

          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="#demoLightbox" class="gphoto" data-toggle="lightbox">';
          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>';
    }
}
?>

</div>

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

照片库

如果你指的是点击时出现的模式，是的有，我这里的实际上是一个你可以使用（或不使用）的模式，你可以玩它。

是的

将此放置在css中

 <style type="text/css">
    /* popup_box DIV-Styles*/
    #popup_box { 
        display:none; /* Hide the DIV */
        position:fixed;  
        _position:absolute; /* hack for internet explorer 6 */  
        height:auto;  
        width:600px;  
        /*background:#FFFFFF;*/  
        left: 450px;
        top:63px;
        z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
        margin-left: 0px;  

        /* additional features, can be omitted */
        /*border:2px solid #ff0000; */
        padding:0px;  
        font-size:15px;  
        -moz-box-shadow: 0 0 15px #FF3333;
        -webkit-box-shadow: 0 0 15px #0033FF;
        box-shadow: 0 0 25px #990000;

    }

    a{  
        cursor: pointer;  
        text-decoration:none;  
    } 

    /* This is for the positioning of the Close Link */
    #popupBoxClose {
        font-size:20px;  
        line-height:15px;  
        right:5px;  
        top:5px;  
        position:absolute;  
        color:#6fa5e2;  
        font-weight:500;    
    }
</style>

---

确保在加载页面时隐藏了div。

是的，有一些功能可以添加到代码中。@Epodax您能告诉我哪些是这些功能吗？或者，如果可能的话，你可以给我编码Thanx。不，这不是免费的编码服务，我们在这里不推荐外部资源，因为它是关闭的-topic@Epodax谢谢你宝贵的时间。如果无法帮助，那么不要浪费别人的时间。不要通过发布一个离题问题来浪费别人的时间。Thanx显示图像的流行音乐，但显示所有图像，而不是按类别显示。是的，我是按照我的代码这样做的，但无论如何我会找到答案。谢谢你的帮助，真的很有效（Y）

<button type="button" class="open" data-dismiss="modal" aria-label="Open" onclick="return loadPopupBox();"><span aria-hidden="true">Open</span></button>

<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="return unloadPopupBox();"><span aria-hidden="true">×</span></button>

function unloadPopupBox() {

    $('#yourdiv').hide();
}

function loadPopupBox(data) {   // To Load the Popupbox

        $('#yourdiv').show();
    });