Make your own Lightbox using jquery

Here is the easy way to create your own light box using jquery in a simple way

Html:
Create any button for triggering the function
For example
input type="button" name="test" onclick="myLightbox()"

Here is the CSS for the overlay container

#popup-overlay {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:5;
background:#777777;
opacity: 0.8;filter: alpha(opacity = 80); ZOOM: 1
}
#my-div {

left:100px;

position:absolute;

top:50px;

       z-index:15;

}

Here is the script to enable the lightbox


function myLightbox(){
scrollbar("hide");
$("body").append('<div id="popup-overlay"></div>');
     $("body").append('<div id="my-div"><input type="button" name="close" onclick="closeLightbox()" /></div>');
window.location.href= "#";
}


function closeLightbox(){
scrollbar("show");
$("#my-div").remove();
$("#popup-overlay").remove();
}


function scrollbar(action){
    if(action == "show"){
$("html") .css('overflow',''); 
//if previous statement is not working use the following
//        document.body.scroll = "";
  //      document.body.style.overflow = "";       
    }
    else {
$("html") .css('overflow','hidden');
//if previous statement is not working use the following 

      //  var oTop = document.body.scrollTop;
       // document.body.style.overflow = "hidden";
       // document.body.scrollTop = oTop;   
    }
}

Note: For this you need to load the jquery file.