making the code more robust (jquery)
<p>please have a look at the entire code and if you copy and paste it in your html then should be working.</p>

<p>as you can see in the below code i have to create two set of code for every action (jquery,css) and what i am trying to achieve is that, i just need to have one set of code for all the actions below...</p>

<p>i am not worried too much about click event and actually i would like to have that two separate click event for the. <code>$("#button").click(function(){...}</code>, <code>$("#button1").click(function(){...}</code></p>

<p><strong>Updated:</strong></p>

<p>html:</p>

<pre><code>&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;yensdesign.com - How to create a stuning and smooth popup in jQuery&lt;/title&gt;
    &lt;link rel="stylesheet" href="general.css" type="text/css" media="screen" /&gt;
    &lt;script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="popup.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;center&gt;
        &lt;div id="button"&gt;
            &lt;input type="submit" value="button" /&gt;&lt;/div&gt;
        &lt;div id="button1"&gt;
            &lt;input type="submit" value="button1" /&gt;&lt;/div&gt;
    &lt;/center&gt;
    &lt;div id="popupContact"&gt;
        &lt;a id="popupContactClose"&gt;x&lt;/a&gt;
        &lt;h1&gt;
            Title of our cool popup, yay!&lt;/h1&gt;
        &lt;p id="contactArea"&gt;
            Here we have a simple but interesting sample of our new stuning and smooth popup. 
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="popupContact1"&gt;
        &lt;a id="popupContactClose1"&gt;x&lt;/a&gt;
        &lt;h1&gt;
            one more, yay!&lt;/h1&gt;
        &lt;p id="contactArea1"&gt;
            Here we have a simple but interesting sample of our new stuning and smooth popup. 
        &lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="backgroundPopup"&gt;
    &lt;/div&gt;
    &lt;div id="backgroundPopup1"&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>jquery:</strong></p>

<pre><code>var popupStatus = 0;
var popupStatus1 = 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;
    }
}

//loading popup with jQuery magic!
function loadPopup1() {
    //loads popup only if it is disabled
    if (popupStatus == 0) {
        $("#backgroundPopup1").css({ "opacity": "0.7" });
        $("#backgroundPopup1").fadeIn("slow");
        $("#popupContact1").fadeIn("slow");
        popupStatus1 = 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;
    }
}

//disabling popup with jQuery magic!
function disablePopup1(){
    //disables popup only if it is enabled
    if(popupStatus1==1){
        $("#backgroundPopup1").fadeOut("slow");
        $("#popupContact1").fadeOut("slow");
        popupStatus1 = 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
    });
}

//centering popup
function centerPopup1() {
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact1").height();
    var popupWidth = $("#popupContact1").width();
    //centering
    $("#popupContact1").css({
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
    });
    //only need force for IE6

    $("#backgroundPopup1").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();
    });

    $("#button1").click(function () {
        //centering with css
        centerPopup1();
        //load popup
        loadPopup1();
    });

    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
});
//Click the x event!
$("#popupContactClose1").click(function () {
    disablePopup1();
});

//Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
});

$("#backgroundPopup1").click(function () {
    disablePopup1();
});

    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 &amp;&amp; popupStatus==1){
            disablePopup();
        }
        if(e.keyCode==27 &amp;&amp; popupStatus1==1){
            disablePopup1();
        }
    });

});
</code></pre>

<p><strong>css</strong></p>

<pre><code>#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;
}
#backgroundPopup1{
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;
}
#popupContact1{
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;
}
#popupContact1 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;
}
#popupContactClose1{
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;
}
#button1{
text-align:center;
margin:100px;
}
</code></pre>

<p>End update</p>

<p>I am following this <a href="http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/" rel="nofollow">blog</a> and one thing got stuck me is, I have two links that I created in order for the two separate links to work, i have to add the same code twice in jquery and css...but i am thinking there should be a better way of doing that... duplicate code with just name diff.</p>

<p>i have added the core of the code so in order for my button1 to work , i have to add twice the same code as shown below with just name diff</p>

<pre><code>    &lt;div id="button"&gt;&lt;input type="submit" value="Press me please!" /&gt;&lt;/div&gt;
    &lt;div id="button1"&gt;&lt;input type="submit" value="Press one more time!" /&gt;&lt;/div&gt;


   &lt;div id="popupContact"&gt;
        &lt;a id="popupContactClose"&gt;x&lt;/a&gt;
        &lt;h1&gt;Title of our cool popup, yay!&lt;/h1&gt;
        &lt;p id="contactArea"&gt;
            Here we have a simple but interesting sample 
        &lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>the source code of the jquery is:</p>

<pre><code>$("#backgroundPopup1").css({
        "opacity": "0.7"
    });
    $("#backgroundPopup1").fadeIn("slow");
    $("#popupContact1").fadeIn("slow");
</code></pre>

<p>the .css</p>

<pre><code>#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;
}
</code></pre>
