Too Simple LightBox PopUp Window

Hey guys, girls,

Here I’m going to teach you too simple lightbox popup window to see it before.

Add these lines into your body tag whenever you want. If may be you can arrange it according to your requirement. But make sure to be having position:fixed; and z-index:100 or 100+;

  1. <div id="divPopUp" style="border: solid 3px #408080;position: fixed;top: 5%;left: 20%;width: 60%;height: 70%;background: #002200;colr: #d9e3e8;z-index: 101;"></div>

And then add these JavaScript code to yor head tag

  1. function hidePopUp(){    
  2.     $('#divPopUp').html('');    
  3.     $('#divPopUp').hide();
  4. }
  5. $(document).ready(function(){    
  6.     $('#divPopUp').hide();
  7.     $('.small_image').click(function(){
  8.     $('#divPopUp').html('</p><div align="center">---------------Here Add Your Tag/Content whatever you want---------------<br/><span onclick="hidePopUp()" style="cursor: pointer">CLOSE</span></div>');     
  9.     $('#divPopUp').show();  
  10.     });
  11. });

Here is a complete example of code which I have used it for image gallery section:

  1. <html>
  2.     <head>
  3.         <script>
  4.             function hidePopUp(){
  5.                 $('#divPopUp').html('');
  6.                 $('#divPopUp').hide();
  7.             }
  8.             $(document).ready(function(){
  9.                 $('#divPopUp').hide();
  10.                 $('.small_image').click(function(){
  11.                     var largeImageSrc=$(this).attr('src');
  12.                     largeImageSrc=largeImageSrc.replace('small','big');
  13.                     $('#divPopUp').html('<div align="center"><img src="'+largeImageSrc+'"/><br/><span onclick="hidePopUp()" id="btnClose" style="cursor: pointer">CLOSE</span></div>');
  14.                     $('#divPopUp').show();
  15.                 });
  16.             });
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <?php
  21.         echo '<ul class="gallerylist">';
  22.         while($row=mysql_fetch_array($result))
  23.         {
  24.             echo '<li><div align="center" style="">'.$row['image_name'].'</div><img class="small_image" style="cursor:pointer;" src="admin/gallery_image/small/'.$row['image_id'].'.'.$row['image_ext'].'"/></li>';
  25.         }
  26.         echo '</ul>';
  27.         ?>
  28. <div id="divPopUp" style="border: solid 3px #408080;position: fixed;top: 5%;left: 20%;width: 60%;height: 70%;background: #002200;color: #d9e3e8;z-index: 101;"></div>
  29.     </body>
  30. </html>

 

See the Pen Light Box by AHMAD ASJAD (@ahmadasjad) on CodePen.0

Happy coding!!!!!!!

Posted in Programming by Leave a comment