Jquery pop up window

Question

I'm trying to load a hover page over the current default page. So far the hover pop up window fads in but then in fades out right away. I’m not sure what I’m doing wrong below. Any help would be appreciated.

Js File

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();
    }
});

 });

aspx page

 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<center>
    <img src="Pictures/6.jpg" alt="my image des" />
    <div id="button">
        <input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
    <a id="popupContactClose">x</a>
    <p id="contactArea">
        Rules: 

        1) Items with "*" are required fields to be filled out.
        <br />
    </p>
    <asp:Label ID="lblEmail" runat="server" Text="*Your Email: "></asp:Label><asp:TextBox
        ID="txtEmail" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmail"
        ErrorMessage="You must enter your email address."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="lblUserName" runat="server" Text="*Name: "></asp:Label>
    <asp:TextBox ID="txtName" runat="server" Width="157px"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtName"
        ErrorMessage="You must enter a username."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="lblCity" runat="server" Text="*City: "></asp:Label>
    <asp:TextBox ID="txtCity" runat="server" Width="168px"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCity"
        ErrorMessage="You must enter your location."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="lblState" runat="server" Text=" State: "></asp:Label>
    <asp:TextBox ID="txtState" runat="server" Width="168px"></asp:TextBox><br />
    <asp:Label ID="lblAge" runat="server" Text="*Age: "></asp:Label>
    <asp:TextBox ID="txtAge" runat="server" Width="165px"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtAge"
        ErrorMessage="Please enter your age to continue."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="lblSex" runat="server" Text="*Gender: "></asp:Label>
    <asp:RadioButton ID="rdMale" runat="server" GroupName="Gender" Text="Male" />
    <asp:RadioButton ID="rdFemale" runat="server" GroupName="Gender" Text="Female" />
    <asp:Label ID="RadialLBL" runat="server"></asp:Label>
    <br />
    <br />
    <asp:Label ID="lblYahoo" runat="server" Text="Yahoo ID: "></asp:Label>
    <asp:TextBox ID="YahooID" runat="server"></asp:TextBox>
    <br />
    <asp:Label ID="lblMSN" runat="server" Text="MSN ID: "></asp:Label>
    <asp:TextBox ID="MSNID" runat="server" Width="133px"></asp:TextBox>
    <br />
    <br />
    <asp:Label ID="lblMyspaceLink" runat="server" Text="Your Myspace Link: "></asp:Label>
    <asp:TextBox ID="MyspaceLink" runat="server" Width="255px"></asp:TextBox>
    <br />
    <asp:Label ID="lblFaceBookLink" runat="server" Text="Your FaceBook Link: "></asp:Label>
    <asp:TextBox ID="FaceBooklink" runat="server" Width="244px"></asp:TextBox>
    <br />
    <asp:Label ID="lblUploadpic" runat="server" Text="*Upload your picture."></asp:Label>
    <asp:FileUpload ID="FileUpload1" runat="server" Height="22px" Width="217px" /><br />
    <br />
    <asp:Label ID="Label1" runat="server"></asp:Label><br />
    <br />
    <asp:Label ID="lblDesctiption" runat="server" Text="*User Bio: "></asp:Label><br />
    <asp:TextBox ID="txtDescription" runat="server" MaxLength="240" Width="390px" Height="73px"
        Rows="3" TextMode="MultiLine"></asp:TextBox><br />
    <br />
    <asp:Button ID="btnRegister" runat="server" Text="Register" OnClick="btnRegister_Click" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtDescription"
        ErrorMessage="Enter a bio or description of yourself."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="EnterAll" runat="server"></asp:Label>
    <asp:Label ID="Displayme" runat="server" Text=""></asp:Label>
    <br />
    <br />
</div>
<div id="backgroundPopup">
</div>

Answer 1

A good first step is to ensure that your click events are being properly handled to prevent unwanted bubbling. You can do this with each of the click handling functions:

$("#button").click(function(e){
  e.preventDefault();
  //centering with css
  centerPopup();
  //load popup
  loadPopup();
});

That may cause the problem to stop happening, and even if it doesn't, it's a good idea to prevent weird behavior from happening in the future. You can read more about preventDefault here: http://api.jquery.com/event.preventDefault/