POPUP window using simple jquery function

The attractive and simple popup window with full control over on by using jquery component
Here I am giving the basic html part ,css,and the javscript part for getting the popup window
Note: please download the jquery component from the site http://docs.jquery.com/Downloading_jQuery and include that component into your html header

Step1
Copy paste the below html part for displaying the button and the div content
Put the following code inside the body tag

 
Step2
Copy paste the following css inside the header part with style sheet tag
This css can be edited as per your requirement
------------------------------------------------------------------------
#backgroundPopup{ display:none;position:fixed;_position:absolute; /* for internet explorer*/
height:100%;width:100%;top:0;left:0;background:#000000;border:1px solid #cecece;z-index:1; }

#maincontent{display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:384px; width:608px; background:#FFFFFF; border:2px solid #cecece; z-index:2;padding:12px; font-size:13px; }

#Closepopup{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; }
-----------------------------------------------------------------------

Step3
Copy paste the following javascript inside the header tag with script tag
This javascript function are editable as per your requirement

      $(document).ready(function(){
         //LOADING POPUP
         //Click the button event!
        $("#openpopup").click(function(){
        //centering with css
          aligncenter();
       //load popup
         loadPopup();
       });
       //CLOSING POPUP
      //Click the x event...
      $("#Closepopup").click(function(){
          disablePopup();
     });
     //Click out event..
        $("#backgroundPopup").click(function(){

     });
     //Press Escape event...
       $(document).keypress(function(e){
           if(e.keyCode==27 && popupStatus==1){
              disablePopup();
           }
      });
})
//0 means disabled; 1 means enabled;
var popupmain = 0;
//loading popup with jquery component
function loadPopup(){
       //loads popup only if it is disabled
       if(popupmain==0){
            $("#backgroundPopup").css({
                "opacity": "0.7"
            });
       $("#backgroundPopup").fadeIn("slow");//to fade in the content slowly
       $("#maincontent").fadeIn("slow");//main pop up content opens slowly
       popupmain = 1;//changing once the popup is opened fro the next time popup content
     }
}
//disabling popup with jQuery magic!
function disablePopup(){
         //disables popup only if it is enabled
        if(popupmain==1){
                 $("#backgroundPopup").fadeOut("slow");
                $("#maincontent").fadeOut("slow");
               popupmain = 0;
          }
}
//centering popup
function aligncenter(){
         //request data for centering
          var windowWidth = document.documentElement.clientWidth;
          var windowHeight = document.documentElement.clientHeight;
         var popupHeight = $("#maincontent").height();
          var popupWidth = $("#maincontent").width();
         //centering
        $("#maincontent").css({
              "position": "absolute",
              "top": windowHeight/2-popupHeight/2,
               "left": windowWidth/2-popupWidth/2
        });
        //only need force for IE6
        $("#backgroundPopup").css({
        "height": windowHeight
     });
}
Step 4
Now on click of “click here” button you should get the popup window , disabling the background from any click operation and click on the X mark on top right to close the window or press escape button from the keyboard to close the popup window

Demo:
The following image shows you the popup window output