SIMPLE LIGHTBOX

HTML

<a href ="javascript:void(0)" class="showpop">Show PopUp</a>
<div id="light" class="white_content">
<a href ="javascript:void(0)" class="hidepop textright">Close</a>
</div>
<div id="fade" class="black_overlay"></div>

Style

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 5px solid gray;
  background-color: white;
  z-index:1002;
  overflow: auto;
}
.textright{
  float: right;
}

jQuery

$(".showpop").click(function(){
$("#light").show();
$("#fade").show();
});
$(".hidepop").click(function(){
$("#light").hide();
$("#fade").hide();
});

Demos

With jQuery Click Here

Without jQuery Click Here