[Web-development (jquery)] jQuery - Popup

jQuery - Popup

 <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script> var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ //LOADING POPUP //Click the button event! $("#button").click(function(){ //centering with css centerPopup(); //load popup loadPopup(); }); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }); </script> <style> #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:300px; width:400px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } #button{ text-align:center; margin:100px; } body{ background:#fff none repeat scroll 0%; line-height:1; font-size: 12px; font-family:arial,sans-serif; margin:0pt; height:100%; } a{ cursor: pointer; text-decoration:none; } </style> <div><input type="submit" value="PopUp!" /></div> <div> <a>x</a> <h1>Title!</h1> <p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl </p> <p>risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante </p> <p>orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla.</p> </div> <div></div> 

source : http://okezone.com, http://log.viva.co.id, http://tutorial101.blogspot.com