반응형
#modal
*클릭해보세요!
#modal 플러그인_bPopup
$('.imagebtn').click (function(){
var ImageUrl = $(this).attr('src');
$('.p-img').attr('src', ImageUrl);
$('.img-popup').bPopup({
modalClose: true
, opacity: 0.8
, positionStyle: 'absolute'
, speed: 300
, transition: 'fadeIn'
, transitionClose: 'fadeOut'
, zIndex : 10
});
});.img-popup {
display:none;
max-width:90%;
text-align:center;
background-color:transparent;
box-shadow: none;
-webkit-box-shadow: none;
border: none;
}
.img-popup .title {
position:relative;
background-color:#222;
color:#fff;
padding: 10px;
font-size:18px
}
.img-popup .title .b-close {
cursor:pointer;
position:absolute;
right: 10px;
top: 5px;
font-size:25px
}
.img-view-popup .content {
padding: 10px
}
.img-popup .content img {
max-width:1000px;
min-width: 150px;
}bPopup || A jQuery modal popup plugin
jQuery.bPopup.js Download bPopup v 0.11.0 What is bPopup? bPopup is a lightweight jQuery modal popup plugin (only 1.49KB gzipped). It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It
dinbror.dk
*개인적으로는 만들어서 쓰는걸 추천!
#24시간동안 보지 않기 팝업
<div class="win_pop">
<h2>안내문</h2>
<div class="win_bt">
<label for="check"><input type="checkbox" id="check" onclick="closePopup();">하루동안 보지않기</label>
</div>
</div> function getCookie(name) {
var cookie = document.cookie;
if (document.cookie != "") {
var cookie_array = cookie.split("; ");
for ( var index in cookie_array) {
var cookie_name = cookie_array[index].split("=");
if (cookie_name[0] == "popupYN") {
return cookie_name[1];
}
}
}
return ;
}
function openPopup() {
var cookieCheck = getCookie("popupYN");
var url="win_pop.siso";
if (cookieCheck != "N")
window.open(url, '', 'width=450,height=750,left=0,top=0')
}openPopup();
function setCookie(name, value, expiredays) {
var date = new Date();
date.setDate(date.getDate() + expiredays);
document.cookie = escape(name) + "=" + escape(value) + "; expires=" + date.toUTCString();
}
function closePopup() {
if (document.getElementById("check").value) {
setCookie("popupYN", "N", 1);
self.close();
}
}
/*
먼저 메인화면 진입 할 때 <body onload="javascript:openPopup('popup.html')">에서
openPopup 메서드를 실행하게 됩니다. onload()는 모든 콘텐츠(css, 스크립트, 이미지)가
로드 된 후 발생하는 이벤트입니다.
메소드에서는 openPopup() 안에는 getCookie함수를 호출하게 되고
getCookie함수에서는 popupYN이라는 이름의 쿠키를 조회하여 값을 리턴합니다.
만약 쿠키의 값이 N이 아닐경우에는 팝업을 호출하게 됩니다.
popupYN이라는 쿠키네임의 value값은 어디서 set을 하게 되냐면 팝업창(popup.html)에서 하게 됩니다.
팝업창에서 하루에 한번만 보기를 체크할 경우 popupYN=N으로 쿠키를 설정하게 됩니다.
그리고 현재 시간을 가져와 현재 시간에 + 1을 하여 다음 날까지 쿠키를 로컬에 저장해 두었다가
24시간이 지나면 쿠키가 자동으로 삭제할 수 있게 expires에 대입
*/728x90
반응형
'JS & jQuery' 카테고리의 다른 글
| 이미지 저장막기 (0) | 2022.03.07 |
|---|---|
| 반원그리기 (0) | 2022.03.07 |
| 셀렉트박스 커스텀_ul li (0) | 2022.02.07 |
| 메일주소 선택 및 직접입력 (0) | 2022.02.07 |
| input[type='file'] 파일명 추출 및 미리보기 (0) | 2022.02.07 |
