1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
  2.         <head>
  3.                 <title>LIGHTBOX EXAMPLE</title>
  4.                 <style>
  5.                 .black_overlay{
  6.                         display: none;
  7.                         position: absolute;
  8.                         top: 0%;
  9.                         left: 0%;
  10.                         width: 100%;
  11.                         height: 100%;
  12.                         background-color: black;
  13.                         z-index:1001;
  14.                         -moz-opacity: 0.8;
  15.                         opacity:.80;
  16.                         filter: alpha(opacity=80);
  17.                 }
  18.                 .white_content {
  19.                         display: none;
  20.                         position: absolute;
  21.                         top: 25%;
  22.                         left: 25%;
  23.                         width: 50%;
  24.                         height: 50%;
  25.                         padding: 16px;
  26.                         border: 16px solid orange;
  27.                         background-color: white;
  28.                         z-index:1002;
  29.                         overflow: auto;
  30.                 }
  31.         </style>
  32.         </head>
  33.         <body>
  34.                 <p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick =“document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block'”>here</a></p>
  35.                

    id=“light” class=“white_content”>This is the lightbox content. href = “javascript:void(0)” onclick =“document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'”>Close

  36.                

    id=“fade” class=“black_overlay”>

  37.         </body>
  38. </html>
Advertisements