위메프 가보시면 상단에 싸다DAY 스르르 올라가면서 사라지는 팝업창 효과가 있습니다.
본문
위메프 싸다DAY 팝업창 처럼
저희 홈페이지도 상단 에도 이 처럼 스르르 올라가면서 사라지는 팝업 창 효과를 주려고 합니다.
일단 소스는
<!-- 상단 띠 배너 -->
<script language='javascript'>
function closeBanner_webcover(target){
setCookie(target, 1, 365, '/', '.wemakeprice.com');
$('#'+target).hide();
}
</script>
<div id="wmpSkip">
<a href="#gnb" onclick="skipNavigation('#gnb');return false;"><span>메뉴 바로가기</span></a>
<a href="#container" onclick="skipNavigation('#container');return false;"><span>본문 바로가기</span></a>
</div>
<!-- 최영진 배너 자동화 관련 추가 -->
<div class="global_ban" id="top_event_banner3" style="display:block;background:#1a90f4" >
<div class="event" >
<img src="http://image.wemakeprice.com/images/1430872072_1.jpg" alt="싸다마트+무이자" usemap="#unitopbn8">
<button type="button" class="btn_cls_ban2" id="top_email_banner_close" onclick="javascript:closeBanner_webcover('top_event_banner_3050')">닫기</button>
</div>
</div>
<map name="unitopbn8" id="topline">
<area shape="rect" coords="0,0,937,72" href="http://www.wemakeprice.com/promotion/g/ssada?source=toplbanner&no=1"
onclick="_gaq.push(['_trackEvent', 'Banner Click', 'Topline Banner', '1_http://www.wemakeprice.com/promotion/g/ssada']);" load_id='1' load_url='/promotion/g/ssada' load_position='Topline Banner' title="싸다딜을 잡아라!" >
</map>
<!-- 최영진 배너 자동화 관련 추가 -->
<!-- 할인 쿠폰 관련 -->
<div id="sale_coupon_popup"></div>
<!-- //할인 쿠폰 관련 -->
<!-- 상단 띠 배너 끝 -->
요렇게 들어가는 걸 확인했습니다. 상단의 소스를 저희 홈페이지에 삽입하니 작동하지 않습니다.ㅠ.ㅠ
여기서 뭐가 더들어가야 제대로 작동을 하는지?
아니면 요런 방식의 소스를 구할수 있을까? 해서 질문 남깁니다.
답변 1
해당 div의 height를 0으로 만들어 버리면 됩니다.
http://nyaongii.dothome.co.kr/temp/wrid_71524.html
아무 것도 안 넣었으니 쉽게 파악 가능하실 겁니다.
답변 정말 감사합니다. 이제 창이 살포시 올라가는건 되는데 ..
오늘하루 그만 보기 닫기 이것과 함께 적용할려니까 창이 살포시 올라가면서 닫히는게 아니라
또 그만 갑자기 한순간에 창이 꺼져버립니다.ㅜ.ㅜ.
애니메이션 코드와 창끄는 소스를 어떻게 합일하여 조화롭게 일맥상통시켜야 할지..
하하하;;;
<div id="div_laypopup" align="center" style="width:100%; height:100px; display:none; overflow:hidden;">
<div style="width:1060px; text-align:right; vertical-align:bottom; " >
<input type="checkbox" name="close" value="OK" onclick="javascript:closeWinAt00('div_laypopup', 1);"/>오늘만 이 창을 열지 않음
</div>
</div>
<script type="text/javascript">
window.onload = function(){
openWin('div_laypopup');
}
</script>
<script type="text/javascript">
$(function() {
$("#close").click(function() {
$("#div_laypopup").animate({height:0}, 1000);
});
});
</script>
<script language="javascript" type="text/javascript">
// 창열기
function openWin( winName ) {
var blnCookie = getCookie( winName );
var obj = eval( "window." + winName );
if( !blnCookie ) {
obj.style.display = "block";
}
}
// 창닫기
function closeWinAt00(winName, expiredays) {
setCookieAt00( winName, "done" , expiredays);
var obj = eval( "window." + winName );
obj.style.display = "none";
}
// 쿠키 가져오기
function getCookie( Name ) {
var nameOfCookie = Name + "=";
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 "";
}
// 00:00 시 기준 쿠키 설정하기
// expiredays 의 새벽 00:00:00 까지 쿠키 설정
function setCookieAt00( Name, value, expiredays ) {
var todayDate = new Date();
todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);
if ( todayDate > new Date() )
{
expiredays = expiredays - 1;
}
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = Name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
</script>
http://nyaongii.dothome.co.kr/temp/wrid_71524.html
// 창닫기
function closeWinAt00(winName, expiredays) {
setCookieAt00( winName, "done", expiredays);
var obj = eval( "window." + winName );
//obj.style.display = "none";
$("#div_laypopup").animate({height:0}, 1000);
}
위 링크 참고하시면 됩니다.
우와우~!! 정말 감사합니다. 창닫기 스크립트 안에 소스를 접목시켜 주면 되는군요.. 정말.. 감사합니다. .. 알면 쉬운것을.. 에효효..ㅠ.ㅠ 저혼자 소스를 따로 따로 생각하니 방법이 없었네요..
다시한번더 감사의 인사 드립니다. 꾸벅.^.^.
