CSS와 경고 메시지를 작성하는 방법에 대해 알아 봅니다.
경고
위험, 성공, 정보 또는 경고 : 경고 메시지는 뭔가 특별한에 대해 사용자에게 통지 할 수 있습니다.
× 위험! 위험 또는 잠재적으로 부정적인 행동을 나타냅니다.
× 성공! 성공 또는 긍정적 인 조치를 나타냅니다.
× 정보! 중성 정보 변경이나 행동을 나타냅니다.
× 경고! 주의해야 할 경고를 나타냅니다.
경고 메시지 만들기
1 단계) HTML을 추가합니다 :
예
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div> 당신이 경고 메시지를 닫고 할 수있는 기능을 원하는 경우 추가 <span> 와 요소를 onclick 말한다 속성 "when you click on me, hide my parent element" - 컨테이너입니다 <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;
}
.closebtn:hover {
color: black;
} »그것을 자신을 시도 많은 경고
한 페이지에 많은 경고 메시지가있는 경우, 당신은 사용하지 않고 다른 경고를 닫습니다 다음 스크립트를 추가 할 수 있습니다 onclick 각 속성을 <span> 요소입니다.
그리고, 천천히 당신이 그들에 클릭 추가 할 때 페이드 아웃 경고를 원하는 경우 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>
»그것을 자신을 시도