[해피CGI][cgimall] Hazel Toast Notification Plugin

# 플러그인 소개 

Hazel은 일정 시간 후에 자동으로 사라지는 고정된 토스트 모양의 알림 팝업 을 만드는 아주 작은 jQuery 플러그인입니다 .

기본, 성공, 어둡고, 위험하고, 경고의 5가지 기본 테마가 제공됩니다. 기존 테마를 사용자 지정하거나 나만의 테마를 추가할 수도 있어 알림이 어떻게 보이는지에 유연성을 제공합니다. 


# 장점
 

CSS가 JavaScript 파일 자체에 포함되어 있다는 것입니다.
즉, 별도의 스타일 시트를 포함할 필요가 없으므로 모든 것이 깔끔하게 유지됩니다.


# 라이센스

MIT 라이센스


# 사용방법 

1. 라이브러리 호출 

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script src="hazel.js"></script>

2. CSS 적용

<style>

html,* { font-family: 'Inter'; box-sizing: border-box; }

body { background-color: #f0efea; line-height:1.6;}

.lead { font-size: 1.5rem;

  font-weight: 300;

  background: linear-gradient(to right, #000000 0%, #000000 50%,#999999 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color:transparent;

}

.container { margin: 150px auto; max-width: 960px; text-align: center; }

h1 {

  background: linear-gradient( 120deg, #bd34fe 30%, #41d1ff );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

button {

  padding: .75rem 1.25rem;

  border: 0;

  margin: 20px auto;

  border-radius: 20px;

  background-color: #222;

  color: #fff;

  cursor: pointer;

}

</style>

<style>

.download{

  padding: 1.25rem;

  border:0;

  border-radius:3px;

  background-color:#4F46E5;

  color:#fff;

  cursor:pointer;

  text-decoration:none;

}

.download:hover{color: #fff}

#carbonads{
display:block;
overflow:hidden;
max-width:728px;
position:relative;
font-size:22px;
box-sizing:content-box
}

#carbonads>span{display:block}

#carbonads a{color:#4F46E5;text-decoration:none}

#carbonads a:hover{color:#4F46E5}

.carbon-wrap{display:flex;align-items:center}

.carbon-img{display:block;margin:0;line-height:1}

.carbon-img img{display:block;height:90px;width:auto}

.carbon-text{display:block;padding:0 1em;line-height:1.35;text-align:left}

.carbon-poweredby{

  display:block;

  position:absolute;

  bottom:0;

  right:0;

  padding:6px 10px;

  text-align:center;

  text-transform:uppercase;

  letter-spacing:.5px;

  font-weight:600;

  font-size:8px;

  border-top-left-radius:4px;

  line-height:1;

  color:#aaa!important

  }

  @media only screen and (min-width:320px) and (max-width:759px){.carbon-text{font-size:14px}}

</style>

3. 이벤트를 걸어서 지정하면 됩니다. 

$('#primary').on('click', function(){

    $(this).hazel('This is a primary notification', 'primary', 3000);

  })