Skip to content

Create a Lightbox effect only with CSS – no javascript needed (modal window)

  • by

Note

Creates a grey overlay in background and a modal window in foreground

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