कैसे बनाएं: चेतावनी संदेश

CSS के द्वारा चेतावनी संदेश का उपयोग करने का सीखा

चेतावनी

चेतावनी संदेश, उपयोगकर्ता को कुछ विशेष विषयों को सूचित करने के लिए उपयोग किए जा सकते हैं: खतरा, सफल, सूचना या चेतावनी。

× खतरा!खतरा या नकारात्मक प्रभाव उत्पन्न करने वाली कार्रवाई को इंगित करता है。
× सफल!सफलता या सकारात्मक कार्रवाई को इंगित करता है。
× सूचना!सामान्य सूचना या कार्रवाई को इंगित करता है。
× चेतावनी!संभवतः ध्यान देने वाली चेतावनी को इंगित करता है。

स्वयं आयात्रा करें

चेतावनी संदेश बनाएं

पहला कदम - HTML जोड़ें:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  यह एक चेतावनी बॉक्स है.
</div>

अगर आप चाहते हैं कि आप चेतावनी संदेश को बंद कर सकें, तो एक बैंडिल सहित जोड़ें onclick एट्रिब्यूट का <span> एलिमेंट, यह एट्रिब्यूट इंगित करता है कि "मैं पर क्लिक करूं तो मेरा पैरेंट एलिमेंट छुपा जाए" - अर्थात बैकनेर <div class="alert">。

सूचना:एक हिंदी अक्षर "x" बनाने के लिए HTML एंबिड "×" का उपयोग करें。

दूसरा कदम - CSS जोड़ें:

चेतावनी बॉक्स और बंद बटन के शैली सेट करें:}

/* चेतावनी संदेश बॉक्स */
.alert {
  padding: 20px;
  background-color: #f44336; /* लाल */
  color: white;
  margin-bottom: 15px;
}
/* बंद बटन */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
/* जब माउस बंद बटन पर जाएगा */
.closebtn:hover {
  रंग: काला;
}

स्वयं आयात्रा करें

कई चेतावनी

यदि पृष्ठ पर कई चेतावनी संदेश हैं, तो आप नीचे दिए गए स्क्रिप्ट को जोड़ सकते हैं, ताकि प्रत्येक <span> एलेमेंट के onclick के रूप में बंद करें अलग-अलग चेतावनी。

और अगर आप चाहते हैं कि चेतावनी पर क्लिक करने पर वे धीरे से फ़ेड आउट हों, तो अनुपात और ट्रांजिशन को इस एट्रिब्यूट में जोड़ें alert क्लास में:

उदाहरण

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 मिलीसेकंड फ़ेड आउट */
}
</style>
<script>
// सभी class="closebtn" एलेमेंट प्राप्त करें
var close = document.getElementsByClassName("closebtn");
var i;
// सभी बंद बटनों को घूमें Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // सभी बंद बटनों को घूमें
  close[i].onclick = function(){
    // <span class="closebtn"> के पैरंट एलेमेंट (<div class="alert">) प्राप्त करें
    var div = this.parentElement;
    // div की अस्पष्टता को 0 (पारदर्शी) सेट करें
    div.style.opacity = "0";
    // 600 मिलीसेकंड के बाद div को छुपाया जाएगा (फ़ेड आउट के समय से समान)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

स्वयं आयात्रा करें

संबंधित पृष्ठ

शिक्षा:कैसे टिप्पणी बनाएं