Javascript
Javascript 간단한 알림 기능(Alert, alarm, toast)
마샤와 곰
2022. 4. 29. 21:50
핸드폰을 사용하면 간단한 알림메시지를 볼 수 있습니다.
이러한 기능을 Toast라고 불리는데(아이폰은 토스트라 불리우지 않을 수도 있습니다..ㅎ) 웹에서 간단하게 구현하기 위해 만들어 보았습니다.
구동모습은 아래와 같습니다.
flex 속성을 부여하였기 때문에 브라우저 크기에 맞추어서 알아서 가운데로 이동하여 줍니다.
물..론 익스플로러 사용자라면 동작을 안할 수도 있습니다..ㅠ
위 내용에 사용된 소스코드 입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
</style>
<body>
<div id="toast">
</div>
</body>
</html>
<script>
function toast (_id, message, option){
let mother = document.getElementById(_id);
if(mother.children.length && mother.children.length > 0) mother.removeChild(mother.firstChild); //초기화
let doc = document.createElement('div');
mother.appendChild(doc);
doc.innerText = message;
//부모노드 입니다.
let motherStyle = {display: 'flex',position: 'fixed',bottom: '1rem','justify-content': 'center', width: '100%', 'z-index':99999999, 'left':0,'text-align':'center'};
for(key in motherStyle) { //부모테그에 스타일을 적용 합니다.
mother.style[key] = motherStyle[key];
}
//자식노드 입니다.
let style = {opacity : 0, background : 'white', color : '#595959', padding : '1rem 3.5rem 1rem 3.5rem', 'border-radius':'1rem', 'width' : 'auto'};
if(option) style = {...style, option};
//자식노드에 스타일 적용 합니다.
for(key in style) {
doc.style[key] = style[key];
}
let max = false; //동작 완료여부 판별 변수 입니다.
let inter = setInterval(() => { //이벤트
let number = parseFloat(doc.style.opacity)+0.02;
if(max) number = parseFloat(doc.style.opacity)-0.02;
if(number >= 1){
setTimeout(() => {
max = true;
setTimeout(() => {
mother.style.display = 'none'; //none처리를 통해서 다른 영역이 선택가능하게 합니다.
clearInterval(inter); //이벤트 끝!
}, 3000);
}, 500);
}
doc.style.opacity = number;
}, 10)
}
toast('toast', `방문해 주셔서 감사합니다.
오늘도 즐겁고 행복한 하루 보내세요!`, {})
</script>
딱히 어려운 코드는 아니므로 기능을 수정하시는 데 어렵지는 않을 것 같습니다.
굳이 부모 노드에서 자식 노드를 다시 생성하지 않아도 되는데..
브라우저의 돔 접근을 최소화 하기 위해서는 조금 고민할 필요는 있겠습니다.
궁금한점이나 문의사항은 언제든지 연락주세요! 👻
반응형