w3.css
알림
CSS를 사용하여 알림 메시지를 만드는 방법을 알아보자.
알림 메시지 만들기
알림 메시지는 사용자에게 위험, 성공, 정보 또는 경고 등 특별한 사항을 알리는 데 사용될 수 있다.
1단계) HTML 추가
<div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> This is an alert box. </div>
경고 메시지를 닫는 기능을 원한다면 “you click on me, hide my parent element”라는 온클릭 속성이 있는 <span> 요소(컨테이너 <div> (class=“alert”)를 추가하자.
2단계) CSS 추가
알림 상자와 닫기 버튼의 스타일을 지정한다.
/* The alert message box */ .alert { padding: 20px; background-color: #f44336; /* Red */ color: white; margin-bottom: 15px; } /* The close button */ .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } /* When moving the mouse over the close button */ .closebtn:hover { color: black; }
기본 예시
예제 보기많은 알림
한 페이지에 알림 메시지가 여러 개 있는 경우 다음 스크립트를 추가하여 각 <span> 요소에 onclick 속성을 사용하지 않고도 각 알림을 닫을 수 있다.
그리고 알림을 클릭했을 때 알림이 천천히 사라지게 하려면 .transition 클래스 에 opacity 및 alert를 추가하자.
예제
<style> .alert { opacity: 1; transition: opacity 0.6s; /* 600ms to fade out */ } </style> <script> // Get all elements with class="closebtn" var close = document.getElementsByClassName("closebtn"); var i; // Loop through all close buttons for (i = 0; i < close.length; i++) { // When someone clicks on a close button close[i].onclick = function(){ // Get the parent of <span class="closebtn"> (<div class="alert">) var div = this.parentElement; // Set the opacity of div to 0 (transparent) div.style.opacity = "0"; // Hide the div after 600ms (the same amount of milliseconds it takes to fade out) setTimeout(function(){ div.style.display = "none"; }, 600); } } </script>
기본 예시
예제 보기참고
W3C School - How TO - Alerts