Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- Python
- TweenMax.js
- 웹표준
- 웹접근성
- IP차단
- 애니메이션
- 팝업레이어
- 마우스커서
- 로또 회차
- VANILLA
- 텍스트조절
- 바닐라 자바스크립트
- asp
- 기초
- 바닐라자바스크립트
- JSP
- CSS
- git
- 바닐라스크립트
- github
- 웹개발키워드
- jQuery
- 코딩공부
- Slide
- sqld52회차
- JS
- 프론트앤드키워드
- SQL
- SQLD후기
- sqld
Archives
- Today
- Total
단비의 코딩 공부 blog
[javascript] 팝업 레이어 (24시간 동안 보지 않기 기능) 본문
HTML
<div id="popup_0" class="popup_num">
<div class="popup1">
<img src="./img/poster3.jpg ">
<p class="close1">
<label for="chkbox0">
<input type="checkbox" name="chkbox0" id="chkbox0" onclick="closeByToday(0)">
24시간 동안 다시 열람하지 않습니다.
</label>
<button class="closeBtn1" onClick="layerClose(0);">닫기</button>
</p>
</div>
</div>
css
#popup_0 {z-index: 1000; position: relative; width: 600px; height: 0; top: 118px; left: 0;}
.popup1 { position: absolute; border: 1px solid #e9e9e9;background: #fff;}
.close1 {padding: 10px 0;background: #000; color: #fff; text-align: right; padding-right:10px;margin-top: -5px;}
.close1 button {margin-right: 5px; padding: 5px 10px;border: 0;background: #393939;color: #fff; font-family: "Noto Sans KR", sans-serif; font-size: 14px;}
.close1 label {margin-right: 5px; padding:2px 5px 4px 10px; border: 0;background: #393939;color: #fff;}
p{padding: 0; margin: 0;}
input#chkbox0{display: none;}
javascript
function layerClose(id) {
document.getElementById("popup_" + id).style.display = "none";
}
function closeByToday(id){
if (document.getElementById("chkbox" + id).checked) {
setCookie("popup_" + id, "done", 1);
}
document.getElementById("popup_" + id).style.display = "none";
document.getElementById("chkbox" + id).checked = false;
}
function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}
var pop_length = $(".popup_num").length;
var cookiedata = document.cookie;
for (i=0;i<pop_length;i++) {
if (cookiedata.indexOf("popup_" + i + "=done") < 0 ) {
document.getElementById("popup_" + i).style.display = "block";
} else {
document.getElementById("popup_" + i).style.display = "none";
}
}
'javascript&jquery' 카테고리의 다른 글
[javascript]플러그인 없이 슬롯 머신 만들기 (0) | 2022.10.20 |
---|---|
[jQuery] 플러그인 없이 slide만들기 (0) | 2022.10.12 |
[jQuery] css 변경하기 (추가, 수정, 삭제) (0) | 2022.10.12 |
[javascript] 플러그인 없이 blick 팝업 만들기 (0) | 2022.10.05 |
[javascript] IP 차단하기 (0) | 2022.09.29 |