javascript - Repeat the popup using php -

i have image directory, images showing on page want popup when user click on image, code using

        #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 ."*.*");     ($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 code working fine how can have popup on each image on click of image, going image url. implements popup did not work, how can repeat popup using php. please help! thanks

give class picss(class="picss") instead of id

try this:

window.onload = function() {    var elems = document.getelementbyclassname("picss");    (var = 0; < 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";      };    }  };