Fatal编程技术网
  • javascript/
  • Javascript 使用cookies隐藏弹出窗口

Javascript 使用cookies隐藏弹出窗口

javascript

Javascript 使用cookies隐藏弹出窗口,javascript,popup,Javascript,Popup,以下代码在页面加载时打开一个弹出窗口（body onload）。当用户关闭弹出窗口时，我不希望它再次出现。据我所知，这可以通过cookies实现，但是如何将其添加到这个示例中呢 <html> <head> <title>Popup</title> <style type="text/css"> #blanket { display:none; background-color:#111; opacity: 0.65

以下代码在页面加载时打开一个弹出窗口（body onload）。当用户关闭弹出窗口时，我不希望它再次出现。据我所知，这可以通过cookies实现，但是如何将其添加到这个示例中呢

<html>
<head>
<title>Popup</title>

<style type="text/css">
#blanket {
    display:none;
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
    display:none;
    position:fixed;
    width:600px;
    height:400px;
    border:5px solid #000;
    z-index: 9002;
    padding: 16px;
    border: 5px solid #50563C;
    border-radius:15px;
    background-color: #FFFFFF;
}

</style>

<script type="text/javascript">
function toggle(div_id) {
    var el = document.getElementById(div_id);
    if ( el.style.display == 'none' ) { el.style.display = 'block';}
    else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
    } else {
        viewportheight = document.documentElement.clientHeight;
    }
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
    } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
            blanket_height = document.body.parentNode.clientHeight;
        } else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById('blanket');
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=blanket_height/2-200;//200 is half popups height


}
function window_pos(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
    } else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
    } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
            window_width = document.body.parentNode.clientWidth;
        } else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=window_width/2-300;//300 is half popups width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);     
}

</script>
</head>

<body onload="popup('popUpDiv')">

    <div id="blanket" style="display:none;"></div>
    <div id="popUpDiv" style="display:none;">

        <a href="#" onclick="popup('popUpDiv')" >Close</a>
    </div>  
  <a href="#" onclick="popup('popUpDiv')">Click to Open pop-up</a>

</body>
</html>


弹出窗口
#毛毯{
显示：无；
背景色：#111；
不透明度：0.65；
*背景：无；
位置：绝对位置；
z指数：9001；
顶部：0px；
左：0px；
宽度：100%；
}
#爆米花{
显示：无；
位置：固定；
宽度：600px；
高度：400px；
边框：5px实心#000；
z指数：9002；
填充：16px；
边框：5px实心#50563C；
边界半径：15px；
背景色：#FFFFFF；
}
功能切换（div_id）{
var el=document.getElementById（div_id）；
如果（el.style.display='none'）{el.style.display='block'；}
else{el.style.display='none'；}
}
函数大小（popUpDivVar）{
if（typeof window.innerWidth！=“未定义”）{
视口高度=window.innerHeight；
}否则{
视口高度=document.documentElement.clientHeight；
}
if（（viewportheight>document.body.parentNode.scrollHeight）和&（viewportheight>document.body.parentNode.clientHeight））{
毛毯高度=视口高度；
}否则{
if（document.body.parentNode.clientHeight>document.body.parentNode.scrollHeight）{
毯子高度=document.body.parentNode.clientHeight；
}否则{
毯子高度=document.body.parentNode.scrollHeight；
}
}
var blanket=document.getElementById（'blanket'）；
毛毯.style.height=毛毯_高度+px'；
var popUpDiv=document.getElementById（popupdivar）；
popUpDiv_高度=毯子_高度/2-200；//200是弹出窗口高度的一半
}
功能窗口位置（popUpDivVar）{
if（typeof window.innerWidth！=“未定义”）{
视口宽度=window.innerHeight；
}否则{
viewportwidth=document.documentElement.clientHeight；
}
if（（viewportwidth>document.body.parentNode.scrollWidth）和&（viewportwidth>document.body.parentNode.clientWidth））{
窗口宽度=视口宽度；
}否则{
if（document.body.parentNode.clientWidth>document.body.parentNode.scrollWidth）{
窗口宽度=document.body.parentNode.clientWidth；
}否则{
窗口宽度=document.body.parentNode.scrollWidth；
}
}
var popUpDiv=document.getElementById（popupdivar）；
窗口宽度=窗口宽度/2-300；//300是弹出窗口宽度的一半
popUpDiv.style.left=窗口宽度+'px'；
}
功能弹出窗口（windowname）{
毛毯尺寸（窗口名称）；
窗口位置（窗口名称）；
开关（“毯子”）；
切换（窗口名）；
}
事实上，我有一段代码可以工作，但与上面的JS和弹出窗口不同

<script type="text/javascript">
       function setCookie(name, value, expires, path, domain, secure) {
           document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
       }
       function getCookie(name) {
           var cookie = " " + document.cookie;
           var search = " " + name + "=";
           var setStr = null;
           var offset = 0;
           var end = 0;
           if (cookie.length > 0) {
               offset = cookie.indexOf(search);
               if (offset != -1) {
                   offset += search.length;
                   end = cookie.indexOf(";", offset);
                   if (end == -1) {
                       end = cookie.length;
                   }
                   setStr = unescape(cookie.substring(offset, end));
               }
           }
           if (setStr == 'false') {
               setStr = false;
           }
           if (setStr == 'true') {
               setStr = true;
           }
           if (setStr == 'null') {
               setStr = null;
           }
           return (setStr);
       }
       function hidePopup() {
           setCookie('popup_state', false);
           document.getElementById('popUpDiv').style.display = 'none';     document.getElementById('blanket').style.display = 'none';
       }
       function showPopup() {
           setCookie('popup_state', null);
           document.getElementById('popUpDiv').style.display = 'block'; document.getElementById('blanket').style.display = 'block';
       }
       function checkPopup() {
           if (getCookie('popup_state') == null) { // if popup was not closed
               document.getElementById('popUpDiv').style.display = 'block'; document.getElementById('blanket').style.display = 'block';
           }
       }

</script>


函数setCookie（名称、值、过期、路径、域、安全）{
document.cookie=名称+“=”+转义（值）+
（（过期）？“expires=“+expires:”）+
（（路径）？“路径=”+path:）+
（（域）？“域=”+域：“”）+
（（安全）？“安全”：“）；
}
函数getCookie（名称）{
var cookie=“”+document.cookie；
var search=“”+名称+“=”；
var setStr=null；
var偏移=0；
var-end=0；
如果（cookie.length>0）{
偏移量=cookie.indexOf（搜索）；
如果（偏移量！=-1）{
偏移量+=搜索长度；
end=cookie.indexOf（“；”，offset）；
如果（结束==-1）{
end=cookie.length；
}
setStr=unescape（cookie.substring（offset，end））；
}
}
如果（setStr=='false'）{
setStr=假；
}
如果（setStr=='true'）{
setStr=真；
}
如果（setStr=='null'）{
setStr=null；
}
返回（setStr）；
}
函数hidePopup（）{
setCookie（'popup_state'，false）；
document.getElementById（'popUpDiv'）。style.display='none'；document.getElementById（'blanket'）。style.display='none'；
}
函数showPopup（）{
setCookie（'popup_state'，null）；
document.getElementById（'popUpDiv'）。style.display='block'；document.getElementById（'blanket'）。style.display='block'；
}
函数checkPopup（）{
if（getCookie（'popup_state'）==null）{//如果popup未关闭
document.getElementById（'popUpDiv'）。style.display='block'；document.getElementById（'blanket'）。style.display='block'；
}
}
我尝试执行以下两种脚本：

<body onload="popup('popUpDiv');'checkPopup()';">
我已尝试合并脚本，但我被卡住了。

也许可以尝试以下方法：

function popup(windowname) {
    if ($.cookie('the_popup') !== '1') {
        $.cookie('the_popup', '1', {
          expires: 365,
          path: '/'
        });

        //Your code
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname); 

    }
}
此代码仅在第一次显示弹出窗口

您需要

这可能是它的副本，看起来他们还没有使用JQuery进行任何操作。我怀疑他们会想添加一个插件来使用cookies。您可能希望更新您的答案，以包含一个仅使用javascript的替代方案。