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/

Jquery弹出窗口

1 个答案: