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>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기