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);
})
# 실행 화면
