কিভাবে তৈরি করা: অলার্ট বার্তা

সিএসএস ব্যবহার করে অলার্ট বার্তা তৈরি করা শিখুন

একটি নোটিশ বার্তা তৈরি করুন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন：

<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;
// সমস্ত বন্ধন বাটনগুলো পারিবর্তন করুন
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);
  }
}

亲自试一试

相关页面

教程：如何创建便签