Fork me on GitHub

사용법

기본적인 알림창을 사용하는 방법입니다.

$.notify("Alert!");

옵션

Type

type 옵션을 사용하여 알림창의 스타일을 지정합니다. 기본값 : default
커스텀 스타일 적용을 위해서는 color background class 섹션을 참고하세요. 

$.notify("Alert!", {type:"info"});

Position

align verticalAlign 옵션을 사용하여, 알림창의 위치를 지정합니다. 기본값 : center, top

모바일 안내

모바일에서 알림창의 가로크기는 100%으로 작동하기 때문에 align은 적용되지 않습니다.
verticalAlign값은 모두 작동하나, middle값에서는 알림창의 가로크기가 80%으로 적용됩니다.
자세한 사항은 모바일 섹션을 참고하세요.

align
verticalAlign 
$.notify("Alert!", {align:"center", verticalAlign:"top"});
이름 값 설명
align (가로위치)
기본값 : center		 left 알림창의 가로위치를 왼쪽에 위치시킵니다.
center 알림창의 가로위치를 가운데에 위치시킵니다.
right 알림창의 가로위치를 오른쪽에 위치시킵니다.
verticalAlign (세로위치)
기본값 : top		 top 알림창의 세로위치를 상단에 위치시킵니다.
middle 알림창의 세로위치를 중간에 위치시킵니다.
bottom 알림창의 세로위치를 하단에 위치시킵니다.

Delay

delay 옵션을 사용하여, 알림창이 표시되는 시간을 설정합니다.기본값 : 3000 (단위 milliseconds)

0초로 설정하는 경우

시간을 0으로 설정하게 되면 배경이 흐릿하게 표시되며, close옵션이 true로 변경됩니다.
알림창은 배경을 클릭하거나, 닫기아이콘을 클릭하면 알림창이 닫힙니다.
배경의 불투명도를 설정하려면 blur 섹션을 참고하세요. 

$.notify("Alert!", {delay:2000});

Animation

animation 옵션을 사용하여, 에니메이션 사용여부를 설정합니다. 기본값 : true 

$.notify("Alert!", {animation:true});

AnimationType

animationType 옵션을 사용하여, 에니메이션 효과를 선택합니다. 기본값 : drop 

$.notify("Alert!", {animationType:"drop"});

Color

color 옵션을 사용하여, 알림창의 글씨 색상을 정의합니다. 기본값 : #000 

$.notify("Alert!", {color: "#D44950"});

Background

background 옵션을 사용하여, 알림창의 배경 색상을 정의합니다. 

$.notify("Alert!", {color: "#fff", background: "#D44950"});

Icon

icon 옵션을 사용하여, 메세지에 아이콘을 추가합니다.
아이콘을 사용하려면 Font Awesome의 라이브러리를 추가해야합니다.
값으로 Font Awesome의 아이콘 네임을 사용합니다. 

<!-- Font Awesome Css Include -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">$.notify("Success", {type: "info", icon:"check"});

Class

class 옵션을 사용하여, 커스텀 스타일 시트를 정의합니다. 

$.notify("Hello World!", {class:"my-class", delay:0, align:"center", verticalAlign:"middle", animationType:"scale"});
	
/* 스타일 정의 */
.my-class{
   background: #304CD8;
   background: -webkit-linear-gradient(left, #304CD8 0%, #9F3762 100%);
   background: -ms-linear-gradient(left, #304CD8 0%, #9F3762 100%);
   background: linear-gradient(to right, #304CD8 0%, #9F3762 100%);
   color: #fff;
   font-size: 25px;
   padding: 35px;
   text-align: center;
}

Blur

blur 옵션을 사용하여, 알림창의 뒷배경 불투명도를 조절합니다. 기본값 : 0.2 

$.notify("Alert!", {blur: 0.2, delay: 0});

Close

close 옵션을 사용하여, 알림창을 닫을 수 있는 닫기아이콘을 추가합니다. 기본값 : false
delay 값이 0인경우 close의 값이 자동으로 true로 설정됩니다. 

$.notify("Alert!", {close: true});