使我的javaScript弹出窗口仅出现一次 [英] Making my javaScript popup to appear only once

问题描述

我正在创建一个JavaScript弹出窗口。代码如下。

I am creating a JavaScript popup. The code is as below.

HTML：

    <div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
    <div id="popup">
        <center>
             <h2>Popup Content Here</h2> 
            <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
        </center>
    </div>
</div>

CSS：

    #ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/pop-bg.png") repeat top left transparent;
    z-index: 1001;
}
#popup {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    height: 361px;
    margin: 5% auto;
    position: relative;
    width: 597px;
}

脚本：

function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
    else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 0);
}

function hideNow(e) {
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}

jsFiddle链接：

http://jsfiddle.net/K9qL4/2/

问题：

上述脚本可以正常工作，但我需要使弹出窗口在我的页面上仅出现一次。
，即，当用户关闭弹出窗口时，直到用户重新启动浏览器或清除其缓存/ cookie时，该弹出窗口才会出现。

The above script works fine, but I need to make the popUp to appear only once on my page. i.e, when the user closes the popup, it should not appear until the user restarts the browser or clears his cache/cookie.

我尝试使用以下内容Cookie脚本，但对我不起作用。

I tried using the below cookie script, but it does not work for me.

<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
var expDays = 1; // number of days the cookie should last

var page = "myPage.html";
var windowprops = "width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes";

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
   }
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
var count = GetCookie('count');
if (count == null) {
count=1;
SetCookie('count', count, exp);

window.open(page, "", windowprops);

}
else {
count++;
SetCookie('count', count, exp);
   }
}
//  End -->
</script>

推荐答案

在这种情况下，我最好使用localStorage曲奇饼。
localStorage具有更直观的界面，用户不能限制
使用此功能。我已经更改了您的代码。

I thing in this case is better to use localStorage instead cookie. localStorage have a more intuitive interface and user cannot restrict this feature to be used. I have changed your code.

function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') {
        document.getElementById('ac-wrapper').style.display = "none";
    }
    else  if(localStorage.getItem("popupWasShown") == null) {
        localStorage.setItem("popupWasShown",1);
        document.getElementById('ac-wrapper').removeAttribute('style');
    }
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 0);
}


function hideNow(e) {
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none';
}

此处正在使用jsFiddle。
http://jsfiddle.net/zono/vHG7j/

Here is working jsFiddle. http://jsfiddle.net/zono/vHG7j/

最诚挚的问候。

这篇关于使我的javaScript弹出窗口仅出现一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！