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/