화면 오른쪽 아래에서 팝업하나 따라다니게 만들기 > 그누보드5 팁자료실

그누보드5 팁자료실

화면 오른쪽 아래에서 팝업하나 따라다니게 만들기 정보

화면 오른쪽 아래에서 팝업하나 따라다니게 만들기

본문

3024378630_1538321295.024.png

저런식입니다.

css

<style type="text/css">
#responsive-banner {
    position: absolute;
    right: 4px;
    width: 300px;
    z-index: 99;
}
#responsive-banner .body{
    clear: both;
    border: 1px solid #CACACA;
    background-color: #FFFFFF;
    color: #202020;
}
#responsive-banner .close {
    float: right;
    background-color: #B03030;
    padding: 2px 4px;
    color: #FFFFFF;
    font-size: 11px;
    cursor: pointer;
}
#responsive-banner .close:active{ background-color: #901B1B }
</style>

js

<script type="text/javascript">
(function($){
    move_banner=function(){
        var pos = $(window).scrollTop();
        var height = $(window).height();
        var $banner = $("#responsive-banner");
        if( $banner.hasClass("closing") ) return;
        $banner.stop(true)
            .animate({ "top": pos+height-$banner.height()-8 }, 310);
    };
    $("#responsive-banner .close").click(function(){
        var $banner = $("#responsive-banner");
        $banner.fadeOut(310).addClass("closing");
        
        var date = new Date();
        date.setTime(date.getTime() + 4*60*60*1000);
        document.cookie="1234-banner=true; expires="+date.getTime();
    });
    $(window).scroll(move_banner)
        .resize(move_banner);
    move_banner();
})(jQuery);
</script>

html

<div id="responsive-banner" style="top: 614px;">
<div class="close">Close</div>
<div class="body">
여기에 넣어주세요
</div>
</div>
추천1
스폰서링크

댓글 전체

전체 1,225 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT