Posted by Prakash timilsina Sunday, January 10, 2010

Smooth and cool JQuery Popups

Share
Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome.






x

Demo!


Your content goes here....







Hey i have an cool popup trick. this is so smooth.
Now lets try.

Make the .html file and include the following..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
  <link rel="stylesheet" href="general.css" type="text/css" media="screen" />
  <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
  <script src="popup.js" type="text/javascript"></script>
  </head>
<body>
  <center>
  <div id="button"><input type="submit" value="Press me please!" /></div>
  </center>
  <div id="popupContact">
  <a id="popupContactClose">x</a>
  <h1>This is Try</h1>
 <p id="contactArea">
  Your content goes here
 
  </p>
  </div>
 <div id="backgroundPopup"></div>
  </body>
  </html>



After this Make the general.css file and include this :



table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#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:384px;
width:408px;
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;
}


Now its trun for the javascript
Make popup.js and include the following


var popupStatus = 0;
function loadPopup(){
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

function disablePopup(){
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

function centerPopup(){
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
   
    $("#backgroundPopup").css({
        "height": windowHeight
    });
   
}


$(document).ready(function(){

    $("#button").click(function(){
        centerPopup();
        loadPopup();
    });
               
    $("#popupContactClose").click(function(){
        disablePopup();
    });
    $("#backgroundPopup").click(function(){
        disablePopup();
    });
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });

});

, | edit post

1 Responses to Smooth and cool JQuery Popups

    v
  1. Anonymous Says:

  2. Hello Friend,

    I am so happy to see this trick in your blog. I was searching this from some hours and now i got it. This is exactly what i want. Thank you alot friend

    Joseph

      Posted on February 19, 2010 at 9:02 AM
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Goto Top