본문 바로가기
IT_Developers/Javascript

jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl

by 고코더 2019. 5. 21.

오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 

안녕하세요.
고코더 입니다.


예전에 팝업 하면 무조건
window.open 을 통한 브라우저 자체 내장객체를 사용했습니다.
그런데 요즘은
반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메
레이어 팝업을 많이 사용 합니다.

이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다.

▼직영하면  j 으르렁 대다 인가 ㅎㅎ

▼ 고코더 방문자와 구독자를 위해
직접 간단하게 코드를 작성했습니다.
그대로 HTML을 실행하면 화면이 실행 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
<script type="text/javascript">
$.jGrowl("간단한 팝업,
고코더넷(gocoder.net),
IT익스프레스 (gocoder.tistory.com)", {
    life:1000,    //공지가 떠있는 시간 1000가 1초
    click: function(msg) {    //클릭시 이벤트를 만들 수 있다.
        alert("클릭시 이벤트");    
    },
    beforeOpen: function(e,m,o) {
        console.log("팝업창이 열리기 전", this);
    },
    open: function(e,m,o) {
        console.log("열렸을때", this);
    },
    beforeClose: function(e,m,o) {
        console.log("닫히기 전에", this);
    },
    close: function(e,m,o) {
        console.log("닫혔을때", this);
    },
    animateOpen: {    //열렸을때 애니메이션
        height: "show",
        width: "show"
    },
    animateClose: {    //닫힐때 애니메이션
        height: "hide",
        width: "show"
    }
});
</script>
cs
▼ 결과 모습입니다.
요즘 홈페이지에서 유행처럼 쓰는 플러그인 입니다. 



▼ 해당 3개의 참조와
1
2
3
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css"/>
cs
▼ 이 스크립트 한줄만 필요 합니다. 
$.jGrowl("간단한 팝업,고코더넷(gocoder.net),IT익스프레스 (gocoder.tistory.com)");

사용법도 간단하고 기능이 안정적입니다.

마무리

홈페이지의 공통으로 사용하는
팝업이 필요하면 이게 딱이네요




저작자표시 비영리 변경금지

'IT_Developers > Javascript' 카테고리의 다른 글

jQuery UI - Div 강조하기 / effect highlight  (0) 2019.06.03
JavaScript - 사파리에서 body, HTML에 클릭(click) 이벤트가 바인딩 되지 않는다.  (0) 2019.05.22
jQuery - 이미지의 img src 태그로 선택하기  (0) 2019.04.12
JavaScript - 버튼 더블클릭 방지 유효성 처리하기 / onclick 안에 쉽게  (0) 2019.04.04
jQuery - 디자인 요소 툴팁 박스 생성하기 / tooltipsy  (0) 2019.03.26

관련글

댓글

티스토리툴바