연우, 장을 열다.

자바스크립트도로 쿠키를 제어할 수 있는줄 몰랐는데 찾아보니까 소스가 존재했습니다. 

하단에 나와있는  아이디 mainInfoLayer  이것이 팝업소스이고, 이것을 쿠키처리해 팝업을 작성했습니다. 


사용원하시는 분들 잘 활용하시길 바랍니다. :) 



<!-- 팝업 시작-->

<style>

map area:focus, map area:active {outline: none; border:0; }

</style>

<div style="position:absolute; margin:auto; width:512px; height:636px;; top:132px; left:215px; background:white;border:1px solid #000;display:none;" id="mainInfoLayer">

<div class="scroll_box_pure" style="overflow:hidden;">

<div class="popUpWrap" style="width:512px;height:100%; padding:0 !important;">

<!-- <img src="/resource/img/popup/seller_ingel_noti.jpg" /> -->

<img src="/resource/img/popup/seller_ginseng_noti.jpg" alt="2018년 설 기획 상품 셀러모집" usemap="#Map" hidefocus="true" />

<map name="Map" id="Map">

    <area alt="하루동안보지않기" title="하루동안보지않기" id="mapAr1" href="#" shape="poly" coords="1,615,140,616,141,633,3,634" />

    <area alt="팝업닫기" title="팝업닫기" id="mapAr2" href="#" shape="poly" coords="489,615,512,615,512,634,489,635" />

    <area alt="" id="mapAr3" title="" href="#" shape="poly" coords="49,447,151,447,163,459,164,465,163,472,159,477,153,482,150,485,49,485,44,482,40,476,37,470,36,462,40,454" />

</map>

<img src="/resource/img/popup/seller_ginseng_noti_close.jpg" alt="닫기버튼" id="ginseng_close" style="position:absolute;left:0px;bottom:0px;display:none;"/>

</div>

</div>

</div>

<script>

function setCookie(name, value, hours){

if(hours){

var date = new Date();

        date.setTime(date.getTime()+(hours*60*60*1000));

        var expires = "; expires="+date.toGMTString();

}

    document.cookie=name + "=" + escape(value) + "; path=/"+expires+";"

}

function openPop(){

     if(getCookie("mainpop")!="closepop"){

    $("#mainInfoLayer").show();

     }

}

function getCookie(name){

    var nameOfCookie = name + "=";24*60*60/24/12

    var x =0;

    while (x<=document.cookie.length){

        var y = (x+nameOfCookie.length);

        if(document.cookie.substring(x,y) == nameOfCookie){

            if((endOfCookie=document.cookie.indexOf(";",y))==-1)

                endOfCookie = document.cookie.length;

            return unescape(document.cookie.substring(y, endOfCookie));

            }

            x=document.cookie.indexOf(" ",x) +1;

            if(x==0)

            break;

            }

        return "";

}

openPop();

$(function(){

console.log();

$("#mapAr1").on("click", function(){

if(!$("#ginseng_close").hasClass("clicked")){

$("#ginseng_close").show();

$("#ginseng_close").addClass("clicked");

}else{

$("#ginseng_close").hide();

$("#ginseng_close").removeClass("clicked");

}

});

$("#ginseng_close").on("click", function(){

if(!$("#ginseng_close").hasClass("clicked")){

$("#ginseng_close").show();

$("#ginseng_close").addClass("clicked");

}else{

$("#ginseng_close").hide();

$("#ginseng_close").removeClass("clicked");

}

});

$("#mapAr2").on("click", function(){

$("#mainInfoLayer").hide("500");

if($("#ginseng_close").hasClass("clicked")){

//cookie start

setCookie("mainpop","closepop","24");

}

});

});

</script>

<!--팝업  끝  -->


만약 이미지 맵을 따서, 작업하다가 이미지 맵 라인을 지우고 싶다면 아래 글도 보고 오십시오! 진짜 유용할겁니다. ^^