[jquery] 은행들 처럼 상단에서 내려오는 팝업

<script type="text/javascript">

<!--

$(document).ready(function() {

layer_open('layer1');

});

function layer_open(el) {

var tmp = $.cookie('popup_'+el);

if(tmp!="off"){

$.cookie('popup_'+el, 'on', { path: '/main/', expires: 1 });

}

$("p.pop_close").css({ "cursor":"pointer" });

$("p.today01").css({ "cursor":"pointer" });

var temp = $('#' + el); 

var bg = temp.prev().hasClass('bg'); 

if (bg) {

$("div.layer:not(:animated)").slideToggle("slow");

} else {

temp.css("display","none");

temp.slideDown("slow");

}

temp.find('.pop_close img').click(function(e) {

if (bg) {

$("div.layer:not(:animated)").slideToggle("slow");

} else {

temp.slideToggle("slow");

}

e.preventDefault();

});

$('.layer .bg').click(function(e) {

$("div.layer:not(:animated)").slideToggle("slow");

e.preventDefault();

});

$('.today01 input:checkbox').click(function(e) {

var thisid2 = $(this).attr('id');

thisid3 = thisid2.substring(6,12);

$('#'+thisid3).slideToggle("slow");

e.preventDefault();

$.cookie(thisid2, 'off', { path: '/main/', expires: 1 });

});

}

</script>

<div id="layer1" class="pop-layer1">

<div id="pop_bg">

<div id="pop_wrap">

<div class="flexslider">

 <ul class="slides">

<li>

<a href="#"><img src="../images/main/img1.jpg" alt="" /></a> 

<a href="#"><img src="../images/main/img2.jpg" alt="" /></a>

</li>

<li><img src="../images/main/img1.jpg" alt="" /></li>

 </ul>

</div>

<p class="clr"></p>

<p class="clr"></p>

<p class="today01"><input type="checkbox" name="layer_popup1" id="popup_layer1" value="checkbox" /><label for="popup_layer1"> 오늘 하루 열지 않음</label></p>

<p class="pop_close"><img src="../images/main/btn_close.gif" alt="닫기" /></p>

</div>

</div>

</div>

참고사이트