Home/ Questions/Q 7838557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T15:08:33+00:00

please have a look at the entire code and if you copy and paste

  • 0

please have a look at the entire code and if you copy and paste it in your html then should be working.

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…

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

Updated:

html:

<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="button" /></div>
        <div id="button1">
            <input type="submit" value="button1" /></div>
    </center>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>
            Title of our cool popup, yay!</h1>
        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup. 
        </p>
    </div>
    <div id="popupContact1">
        <a id="popupContactClose1">x</a>
        <h1>
            one more, yay!</h1>
        <p id="contactArea1">
            Here we have a simple but interesting sample of our new stuning and smooth popup. 
        </p>
    </div>
    <div id="backgroundPopup">
    </div>
    <div id="backgroundPopup1">
    </div>
</body>
</html>

jquery:

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 && popupStatus==1){
            disablePopup();
        }
        if(e.keyCode==27 && popupStatus1==1){
            disablePopup1();
        }
    });

});

css

#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;
}

End update

I am following this blog 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.

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

    <div id="button"><input type="submit" value="Press me please!" /></div>
    <div id="button1"><input type="submit" value="Press one more time!" /></div>


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

the source code of the jquery is:

$("#backgroundPopup1").css({
        "opacity": "0.7"
    });
    $("#backgroundPopup1").fadeIn("slow");
    $("#popupContact1").fadeIn("slow");

the .css

#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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From the jQuery code you provided, The only i improvement i would suggest is using chaining 

    $("#backgroundPopup1").css({ "opacity": "0.7"}).fadeIn("slow");
$("#popupContact1").fadeIn("slow");

    For avoiding repeated code for binding same functionality for many elements, you may bind it only once like this

    $(function(){
 
  $("#btnSave,#btnSaveMore").click(function(e){
    //do your stuff here
  });

});

    This will be applied to 2 elements with id btnSve and btnSaveMore

    EDIT : As per the updated question.

    So you have duplicated code for 2 buttons. Let us rewrite it like this.

    Let us make some changes to your HTML markup. We will give ID’s to the buttons to identify which button is being clicked.

    <input id="btn-1" type="submit" value="button" /></div>
<input id="btn-2" type="submit" value="button1" /></div>

<div id="popupContact1"></div>
<div id="popupContact2"></div>
<div id="backgroundPopup1"></div>
<div id="backgroundPopup2"></div>

    Now lets go to the javascript, 

    $(document).ready(function(){

   $("input[type='submit']").click(function(){
       var id=$(this).attr("id").split("-")[1]; //this will give us either 1 or 2 
       CenterPopup(id);
       LoadPopup(id)
   });    
});
var popupStatus = 0;
function CenterPopup(itemId)
{
  var item=$("#popupContact"+itemId);
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = item.height();
  var popupWidth = item.width();

  item.css({"position": "absolute",
      "top": windowHeight/2-popupHeight/2,
      "left": windowWidth/2-popupWidth/2
   });   
  $("#backgroundPopup"+itemId).css({
     "height": windowHeight
  });

}

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

    Working demo http://jsfiddle.net/3FbbC/7/

    This should work for the layout and javascript code you mentioned. But I seriously don’t understand why you need 2 div’s for same purpose (popContact1 & poupContact2). Since i am not sure abt your whole page objective, i am not able to tell you a better pattern.

    • 0