javascript - 使用 php 重复弹出窗口

Question

我有图像目录，我在页面上显示的所有图像但现在我想在用户单击图像时弹出，我使用的代码是

        #overlay {
      display:none;    
       position:fixed;  
       left:0px;        
    top:0px;         
        width:100%;      
           height:100%;     
        background:#000; 
       opacity:0.5;     
        z-index:99999;   
  }

      #popup{
        display:none;
        position:fixed;
      left:50%;        
      top:50%;         
      width:300px;     
      height:150px;
     margin-top:-75px;
      margin-left:-150px;
      background:#FFFFFF;
         border:2px solid #000;
       z-index:100000;      
       }</style>

         <script>window.onload = function() {
         document.getElementById("picss").onclick = function(){
            var overlay = document.getElementById("overlay");
          var popup = document.getElementById("popup ");
         overlay.style.display = "block";
          popup.style.display = "block";
          };</script>  



       <?php $imgdir = 'images/pictures'.$idd.'/';
     $files = glob( $imgdir ."*.*");
    for ($i=1; $i<count($files); $i++)
        {
      $num = $files[$i];



 echo '<a href="'.$num.'"  id="picss"><img src="'.$num.'"           class="actor_images" width ="220" /></a>';

  }

    ?> 

Php 代码工作正常，但我如何在单击图像时在每个图像上弹出，现在它转到图像 url。我实现了弹出窗口但没有工作，我如何使用 php 重复弹出窗口。 请帮忙! 谢谢

Answer 1

Give class as picss(class="picss") instead of id

试试这个:

window.onload = function() {
  var elems = document.getElementByClassName("picss");
  for (var i = 0; i < elems.length; i++) {
    elems[i].onclick = function() {
      var overlay = document.getElementById("overlay");
      var popup = document.getElementById("popup ");
      overlay.style.display = "block";
      popup.style.display = "block";
    };
  }
};