Question

您好我正在尝试在页面加载后显示弹出窗口时创建一个cookie，但不知何故弹出窗口仍然显示，因为在我看来cookie不会创建。任何人都可以告诉我为什么会发生这种情况，我的错误在哪里？

所以这是我的popup.js文件内容

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
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
    });

}
//---------------cookies-------------------//

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
alert(c_value);
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie("shoppingKatalog");
if (username!=null && username!="")
  {
    alert(username);
  }
else 
  {
    //centering with css
    centerPopup();
    //load popup
    loadPopup();    
    setCookie("shoppingKatalog","istekuva-za-eden-den",321);
  }
}

//--------------end cookies---------------//


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

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

});

和我的index.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<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="http://www.mywebsite.com/templates/it_theshop/popup/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="http://www.mywebsite.com/templates/it_theshop/popup/popup.js" type="text/javascript"></script>
    <script type="text/javascript">
    </script>
</head>
<body>

    <center>
        <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
    </center>
    <div id="popupContact">
        <div id="popup_wrap" style="background-image:url('http://www.mywebsite.com/templates/it_theshop/images/popup/shopping-popup1.jpg');height:380px;width:800px;">
<div style="float:left;width:490px;padding:5px;">
<h1 style="margin:0px;">Заштеди до <span style="color:#981A32;">90%</span></h1>
<h2 style="margin:0px;">Имајте ја информацијата - <span style="color:#981A32;">ПРВИ!</span></h2>
<p style="margin:0px;">Дознај каде може да добиеш огромен попуст на чевли, облека, накит, козметика, производи за дома, услуги, патувања... Се она што го плаќаш во секојдневниот живот.</p>
<h4 style="margin:0px;">Нашиот Newsletter е БЕСПЛАТЕН!</h4>
<form method="post">

<table class="acymailing_form">
<p style="color:#981A32;margin:0px;">Одберете ја типот на информација што сакате да ја добивате:</p>
<tr>
<td align="left"><input type="checkbox" class="acymailing_checkbox" name="subscription[]" checked="checked" value="1" /><b style="color:#981A32;">СИТЕ ПОПУСТИ И ПРОИЗВОДИ</b></td>
</tr>
<tr>
<td align="left"><input type="checkbox" class="acymailing_checkbox" name="subscription[]" value="2" />
<b style="color:#981A32;">САМО НОВИ ПРОИЗВОДИ</b></td>
</tr>
<tr>
<td align="left"><input type="checkbox" class="acymailing_checkbox" name="subscription[]" value="4" /><b style="color:#981A32;">САМО ПОПУСТИ</b></td>
</tr>
<tr style="color:#981A32;">
<td><label for="user_name">Име</label><input id="user_name" type="text" name="user[name]" value="" /></td>
</tr>
<tr>
<td style="color:#981A32;"><label for="user_email">E-мејл</label><input id="user_email" type="text" name="user[email]" value="" /></td>
</tr>
<tr>
<td><div style="display:none;"><label for="user_html">Добивај</label></div></td>
<td><div style="display:none;"><input type="radio" name="user[html]" value="0" id="user_html_0" /><label for="user_html_0">Text</label></div><div style="display:none;"><input type="radio" name="user[html]" value="1" id="user_html_1" checked="checked" /><label for="user_html_1">HTML</label></div></td>
</tr>

<tr>
<td colspan="2">
<div style="display:none;">
<input type="radio" name="task" value="optin" checked="checked" id="optin" /><label for="optin">Subscribe</label>
<input type="radio" name="task" value="optout" id="opftout" /><label for="optout">Unsubscribe</label> </div>
<input class="button" type="submit" value="Пријави се БЕСПЛАТНО!" name="Submit" style="color: white;background-color: orange;border: 0;border-radius: 5px;height: 30px;font-weight: bold;margin-top:5px;" onclick="setCookie('mywebsite','istekuva-za-godina',364);" /></td>
</tr>
</table>
<input type="hidden" name="gtask" value="sub" style="color:#981A32;" />
<input type="hidden" name="redirect" value="http://www.mywebsite.com" />
<input type="hidden" name="option" value="com_acymailing" />
<input type="hidden" name="visiblelists" value="1,2,4" />
<input type="hidden" name="hiddenlists" value="YOUR_LISTS" />
</form>
</div>
<img src="http://www.mywebsite.com/templates/it_theshop/images/popup/popust.png" style="float:right;padding-right:-10px;position: absolute;margin-left: 260px;" />
</div>
    </div>
    <div id="backgroundPopup"></div>
</body>
</html>

Answer 1

弹出窗口正在显示，因为它默认情况下未隐藏。尽量用css隐藏它：

#backgroundPopup { display:none }

最初应隐藏它，然后在需要时显示它。

Answer 2

您的Cookie已创建。因为在你的函数checkCookie（）中你正在使用

if (username!=null && username!="")
{
 alert(username);
}

此处条件不等于null。所以创建了cookie

jquery弹出窗口总是显示

2 个答案: