कैसे करें - अलर्ट
CSS के साथ अलर्ट संदेश बनाने का तरीका जानें।
अलर्ट
चेतावनी संदेशों का उपयोग उपयोगकर्ता को किसी विशेष चीज़ के बारे में सूचित करने के लिए किया जा सकता है: खतरा, सफलता, सूचना या चेतावनी।
अलर्ट संदेश बनाएं
चरण 1) HTML जोड़ें:
उदाहरण
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
यदि आप अलर्ट संदेश को बंद करने की क्षमता चाहते हैं, तो एक विशेषता के साथ एक <span> तत्व जोड़ें onclickजो कहता है कि "जब आप मुझ पर क्लिक करते हैं, तो मेरे मूल तत्व को छुपाएं" - जो कंटेनर <div> (वर्ग = "अलर्ट") है।
युक्ति:× "x" अक्षर बनाने के लिए HTML निकाय " " का प्रयोग करें ।
चरण 2) सीएसएस जोड़ें:
अलर्ट बॉक्स और क्लोज बटन को स्टाइल करें:
उदाहरण
/* 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> तत्व पर ऑनक्लिक विशेषता का उपयोग किए बिना विभिन्न अलर्ट बंद करने के लिए निम्न स्क्रिप्ट जोड़ सकते हैं।
और, यदि आप चाहते हैं कि अलर्ट पर क्लिक करने पर वे धीरे-धीरे फीके पड़ जाएं, तो कक्षा में जोड़ें opacity
और जोड़ें :transitionalert
उदाहरण
<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>
युक्ति: नोट्स भी देखें ।