Cara membuat pop up gambar di html

  
    
    Popup Image
    
    
      body { width: 100%; height: 100%; background: grey; margin: 0; }
      main { width: 100%; height: 100%; position: absolute; }
      #my_image {width: 200px; margin: 20px; cursor: zoom-in;}
      #my_image:hover {opacity: 0.7;}
      #appear_image_div {width: 100%; height: 100%; position: absolute; z-index: 10; opacity: 0.7; background: #002447;}
      #appear_image {display: block; margin: auto; position: relative; z-index: 11; top: 20px;}
      #close_image {position: fixed; z-index: 12; top: 20px; right: 20px; cursor: pointer;
      font-family: sans-serif; color: #fff; font-size: 15pt;}
      #close_image:hover{opacity: 0.7;}
    
    
      jQuery[function[$]{
        $['#my_image'].click[function[]{
          var img = $[this].attr["src"];
          var appear_image = "
";
          appear_image = appear_image.concat[""];
          appear_image = appear_image.concat["
x"];
          $['body'].append[appear_image];
        }];
      }];
      function closeImage[] {
        $['#appear_image_div'].remove[];
        $['#appear_image'].remove[];
        $['#close_image'].remove[];
      }
    
  
  
    
      
    
  

Itu dia scriptnya selamat mencoba, jika artikel ini bermanfaat silakan share. jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah