카페24_팝업스킨 정보
레이아웃 카페24_팝업스킨관련링크
첨부파일
테스트한 버전5.4
호환 가능 버전5.3 이상
본문
카페24에 쓰는 형식의 팝업입니다.
/theme/basic/shop/shop.tail.php
데모: https://music1020.iwinv.net/shop/
<style>
#popup {
position: absolute;
top: 50px;
left: 50px;
z-index: 9999;
width: 310px;
overflow: hidden;
}
#popup .popup {
display: flex;
flex-direction: column;
}
#popup .popup .swiper-pagination {
left: unset;
bottom: unset;
right: unset;
top: unset;
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
background: #ffffff;
}
#popup .popup .swiper-pagination .swiper-pagination-bullet {
width: 33.33%;
height: 80px;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-radius: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1.5em;
color: #aaa;
background: #f7f7f7;
}
#popup .popup .swiper-pagination .swiper-pagination-bullet-active {
background: #fff;
color: #222;
}
#popup .popup .bottom {
display: flex;
height: 40px;
align-items: center;
justify-content: flex-end;
background: #f4f4f4;
border-top: 1px solid #e8e8e8;
margin-top: -1px;
}
#popup .popup .bottom .today {
display: flex;
align-items: center;
height: 40px;
margin-right: 20px;
list-style: po;
}
#popup .popup .bottom .today input {
display: none;
}
#popup .popup .bottom .today input ~ i {
width: 20px;
height: 20px;
background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;
order: 2;
margin-left: 2px;
}
#popup .popup .bottom .today input ~ i:before {
display: none !Important
}
#popup .popup .bottom .today input ~ p {
font-size: 12px;
color: #222;
order: 1;
}
#popup .popup .bottom .today input:checked ~ i {
background: url("../img/icon_checkbox_on.png") no-repeat 50% 50% / contain
}
#popup .popup .bottom .close {
width: 80px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 12px;
border-left: 1px solid #e8e8e8;
}
</style>
<link rel="stylesheet" href="/swiper.min.css">
<script src="/swiper.min.js"></script>
<div id="popup" style="display:block">
<div class="popup">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="javascript:;" target="">
<img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/258713f21bb38ac2a7327ffc0c43d339.jpg" alt="멀티팝업<br>무료 제공">
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;" target="">
<img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/0425efdeb337abd0a262e41645cc1b4a.jpg" alt="인스타그램<br>팔로우">
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;" target="">
<img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/334652e228aabfd6d9323381cfd5cc3c.jpg" alt="카드사별<br>무이자 할부">
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;" target="">
<img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/c2a803d24b59532d4ebe420acce7a6af.jpg" alt="포토리뷰<br>적립금 이벤트">
</a>
</li>
<li class="swiper-slide"">
<a href="javascript:;" target="">
<img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/82007179d19ed40c139a6d9c41b0a767.jpg" alt="NEW 5%<br>신상 할인 혜택">
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;" target="">
<img src="https://ecudemo14252.cafe24.com/web/upload/NNEditor/20220616/d426659421f621c97f3b825935ef4c95.jpg" alt="오프라인<br>매장 안내">
</a>
</li>
</ul>
<div class="swiper-pagination"></div>
<div class="bottom">
<label class="checkbox today"><input type="checkbox"><i></i><p>오늘 하루 열지 않음</p></label>
<a href="javascript:;" class="close">닫기</a>
</div>
<script>
//<![CDATA[
var keys = ['멀티팝업<br>무료 제공', '인스타그램<br>팔로우', '카드사별<br>무이자 할부', '포토리뷰<br>적립금 이벤트', 'EW 5%<br>신상 할인 혜택', '오프라인<br>매장 안내'];
var swiper = new Swiper('#popup .popup', {
observer: true,
observeParents: true,
slidesPerView: 1,
slidesPerGroup: 1,
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<div class="' + className + '"><div><span>' + (keys[index]) +
'</span></div></div>';
},
},
navigation: false,
speed: 1350,
autoplay: {
delay: 1350,
disableOnInteraction: false,
},
});
$("#popup .close").on("click",function(){
$("#popup").hide();
});
//]]>
</script>
</div>
</div>
!-->!-->!-->
추천
13
13
댓글 전체
감사 합니다.
좋은 소스 공개해 주셔서 감사합니다. ^^
꺌끔, 이거 영카트용인가요?
멋진 스킨 공개해 주셔서 감사합니다.
멋지네요~ 레이어로 움직일수 있다면 정말 완벽하겠네요 ^^
와우 굿입니다
관리자 팝업에서는 사용하는 건가요
아니면 수동으로 사이트에 올려서 사용하는 건가요
관리자 팝업에서는 사용하는 건가요
아니면 수동으로 사이트에 올려서 사용하는 건가요
좋은 소스입니다 이거 순서대로 올리면 되나요 아미나 5.3.3.3.1인데
답쫌주세요
답쫌주세요
감사합니다.
감사합니다.
감사합니다.
데모 페이지에 오늘 하루 열지 않음 안되는거죠 ?
소스 감사합니다.
아미나도 사용가능한지 저도 궁금합니다