کیسے بنائیں: وارننگ پیغام

سی ای اس کا استعمال سیکھنے کے لئے تعلیمی کورس:

وارننگ پیغام بنائیں

پہلے قدم - ایچ تی ایم کا اضافہ:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  یہ ایک وارننگ بکس ہے。
</div>

اگر آپ خواہش رکھتے ہیں کہ آپ کا وارننگ پیغام بند کرسکتا ہے تو ایک بند کردار سے آپ کا وارننگ پیغام اضافہ کریں onclick کی خصوصیت <span> عنصر، یہ کا مطلب ہے کہ جب آپ میرا والد عنصر کلک کریں تو میرا والد عنصر پوشیدہ کردوگا - یعنی کانٹینر <div class="alert">.

نکات:حروف 'x' کو بنانے کے لئے ایچ تی ایم کی نمائندگی '×' استعمال کریں。

دوئم قدم - سی ای اس کا اضافہ:

ਚਿਤਾਵਨੀ ਬਕਸ ਅਤੇ ਬੰਦ ਬਟਨ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ:}

/* ਚਿਤਾਵਨੀ ਮੈਸੇਜ ਬਕਸਾ */
.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 {
  color: black;
}

亲自试一试

ਕਈ ਚਿਤਾਵਨੀਆਂ

ਜੇ ਪੰਨੇ 'ਤੇ ਕਈ ਚਿਤਾਵਨੀਆਂ ਹਨ, ਤਾਂ ਹੇਠ ਲਿਖੇ ਸਕ੍ਰਿਪਟ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ, ਤਾਕਿ ਹਰ ਇੱਕ ਚਿਤਾਵਨੀ ਦੇ ਬੰਦ ਬਟਨ ਦੇ ਬਿਨਾ ਹੀ <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);
  }
}

亲自试一试

相关页面

教程：如何创建便签