notipopup.js

첫화면에 공지용 레이어팝업을 손쉽게 구현하게 해주는 플러그인으로 오늘은 그만보기 기능이 있음

샘플영상

다운로드

notipopup.js V1.1 다운로드

설치/사용법

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/notipopup.js"></script>

<script>
    $(function(){
        $('#notipopup').topmenu({
            startX:'20%',
            startY:'10%',
            clse:'.close',
            todayclose:'.todayclose',
                   code:'notipopup'
        });
    });
</script>

<body>
    <div id="notipopup">
        <div>
            <h1><!-- 공지내용 --></h1>
            <div class="todayclose">TODAY CLOSE</div>
            <div class="close">CLOSE</div>
        </div>
    </div>
</body> 

 

1. 제이쿼리 설치가 필요합니다.

 

 

 

 

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/notipopup.js"></script>

<script>
    $(function(){
        $('#notipopup').topmenu({
            startX:'20%',
            startY:'10%',
            clse:'.close',
            todayclose:'.todayclose',
                   code:'notipopup'
        });
    });
</script>

<body>
    <div id="notipopup">
        <div>
            <h1><!-- 공지내용 --></h1>
            <div class="todayclose">TODAY CLOSE</div>
            <div class="close">CLOSE</div>
        </div>
    </div>
</body> 

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/notipopup.js"></script>

<script>
    $(function(){
        $('#notipopup').topmenu({
            startX:'20%',
            startY:'10%',
            clse:'.close',
            todayclose:'.todayclose',
                   code:'notipopup'
        });
    });
</script>

<body>
    <div id="notipopup">
        <div>
            <h1><!-- 공지내용 --></h1>
            <div class="todayclose">TODAY CLOSE</div>
            <div class="close">CLOSE</div>
        </div>
    </div>

</body> 

 

3. 공지가 될 레이아웃을 작성 합니다.

 

 

 

 

<style>
    .button{text-align:center; background:#eee; height:20px; line-height:20px;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/notipopup.js"></script>

<script>
    $(function(){
        $('#notipopup').topmenu({
            startX:'20%',
            startY:'10%',
            clse:'.close',
            todayclose:'.todayclose',
                   code:'notipopup'
        });

    });
</script>

<body>
    <div id="notipopup">
        <div>
            <h1><!-- 공지내용 --></h1>
            <div class="todayclose">TODAY CLOSE</div>
            <div class="close">CLOSE</div>
        </div>
    </div>
</body> 

 

4. 자동으로 플러그인이 실행될 수 있도록 함수를 작성 합니다.

 

 

 

 

 $('#notipopup').topmenu({
            startX:'20%',     //화면에서 레이어 팝업의 위치 (가로)
            startY:'10%',     //화면에서 레이어 팝업의 위치 (높이)
            clse:'.close',     //닫기 버튼을 설정
            todayclose:'.todayclose',     //오늘은 그만 보기 버튼을 설정
            code:'notipopup'     //레이어 팝업 고유코드(팝업 여러개를 이용할 경우 코드를 다르게 적용해서 사용 가능)
 });

 

5. 옵션을 설정 합니다.

 

 

 

 

* 플러그인 설치는 지원하지는 않습니다.
위로

잠시만 기다려주세요.