방법 - 경고
CSS로 경고 메시지를 만드는 방법을 알아보세요.
경고
경고 메시지는 위험, 성공, 정보 또는 경고와 같은 특별한 것에 대해 사용자에게 알리는 데 사용할 수 있습니다.
×
위험! 위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
×
성공! 성공 또는 긍정적인 작업을 나타냅니다.
×
정보! 중립적인 정보 변경 또는 조치를 나타냅니다.
×
경고! 주의가 필요할 수 있는 경고를 나타냅니다.
경고 메시지 생성
1단계) HTML 추가:
예시
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
경고 메시지를 닫는 기능을 원하면 onclick
"나를 클릭하면 내 부모 요소를 숨깁니다"라는 속성이 있는 <span> 요소를 추가하세요. 이는 컨테이너 <div>(class="alert")입니다.
팁: HTML 엔터티 " ×
"를 사용하여 문자 "x"를 만듭니다.
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 속성을 사용하지 않고 다른 경고를 닫을 수 있습니다.
그리고 경고를 클릭할 때 경고가 천천히 사라지도록 하려면 및 opacity
클래스 에 다음 을 추가합니다.transition
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>
팁: 참고 사항 도 확인하세요 .