Jqueryポップアップウィンドウ

Question

現在のデフォルトページにホバーページをロードしようとしています。これまでのところ、ホバーのポップアップウィンドウはすぐに消えてしまいますが、すぐに消えてしまいます。私は以下に間違って何をしているのか分からない。どんな助けもありがとう。

のJsは

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ページ

<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

は良い最初のステップは、あなたのクリックイベントが適切に不要な泡立ちを防ぐために処理されていることを確認することです。あなたがクリック処理関数のそれぞれでこれを行うことができます。問題が起こって停止させ、それがない場合であっても、それが将来的に起こってから奇妙な行動を阻止することをお勧めしますこと

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

。ここでpreventDefaultについて詳しく読むことができます：http://api.jquery.com/event.preventDefault/