728x90
유저의 시선이 많이 머무르는 위치가 웹사이트 상단, 하단이다 보니 띠 배너 형식으로 배너를 자주 넣게 됩니다.
오늘은 상단에 얇은 띠 배너 형식으로 배너를 넣고 브라우저 쿠키를 체크해서 오늘 하루 그만보기 기능을 넣는 소스를 알아보도록 하겠습니다.
<head>
<style type="text/css">
body {padding:0; margin:0;}
#topBanner {position:relative; width:100%; height:65px; background-color:#000; color:#fff; overflow:hidden;}
#topBanner .bn_con {width:100%; margin:0; padding:0; text-align:center;}
#topBanner .bn_con img {width:28px; padding:18px 5px 0 0;}
#topBanner .bn_con span {font-size:16px; line-height:65px; color:#fff;}
#topBanner .bn_close {position:absolute; top:23px; right:25px; padding:0 0 0 20px; font-size:9pt; letter-spacing:-1px;}
#topBanner .bn_close .btnClose {display:inline-block; padding:1px 7px 2px 5px; margin-left:10px; border-radius:2px; background:#fdee0b;}
#topBanner .bn_close #chkday {position:absolute; top:2px; left:0; width:17px; height:17px; color:#fff;}
#topBanner .bn_close label [for=chkday] {cursor:pointer; padding-right:10px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="JavaScript">
//쿠키저장
function setCookie( name, value, expiredays ) {
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
$(document).ready(function(){
$("#topBanner .btnClose").click(function(){
if($("#chkday").is(':checked')){
setCookie( "topPop", "done" , 1 );
//alert("쿠키를 생성 체크");
}
$('#topBanner').slideUp(500);
});
});
</script>
</head>
<body>
<div id="topBanner">
<div class="bn_con">
<a href="">
<span>1초 만에 회원가입하고 1000원 할인쿠폰 받기</span>
</a>
</div>
<div class="bn_close">
<input type="checkbox" value="checkbox" name="chkbox" id="chkday"/><label for="chkday">오늘 하루 그만보기 </label>
<a href="#none" class="btnClose">
<span>닫기</span>
</a>
</div>
</div>
<script language="Javascript">
//쿠키가 있으면 창을 안 띄우고 없으면 뛰웁니다.
cookiedata = document.cookie;
if ( cookiedata.indexOf("topPop=done") < 0 ){
document.all['topBanner'].style.display = "block";
}
else {
document.all['topBanner'].style.display = "none";
}
</script>
</body>css, html, script 를 따로 정리해 놓고 간략한 설명글은 주석을 달아 올려 놓았으니 한번씩 테스트해보시면 좋을 듯 합니다. 위 소스를 긁어서 보기 귀찮으신 분들은 하단에 첨부파일을 확인해 주세요~
반응형
'공부 > javascript' 카테고리의 다른 글
| 윈도우 팝업 window.open 사이즈 설정 (0) | 2023.01.12 |
|---|---|
| 오늘 하루 그만보기 (0) | 2023.01.07 |
