چگونه ایجاد کنید: پیام‌های اخطار

آموزش نحوه استفاده از CSS برای ایجاد پیام‌های اخطار.

پیام اخطار ایجاد کنید

قدم اول - اضافه کردن HTML:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  این یک جعبه اخطار است.
</div>

اگر می‌خواهید بتوانید پیام‌های اخطار را ببندید، یک onclick ویژگی‌های <span> عنصر، این ویژگی نشان‌دهنده این است که "وقتی روی من کلیک می‌کنید، عنصر والد من را پنهان کنید" - یعنی قالب <div class="alert">.

تذکر:از نمادهای HTML "×" برای ایجاد حرف "x" استفاده کنید.

دومی قدم - اضافه کردن 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 {
  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 نیمه شفافیت تنظیم میشود (شفاف)
    div.style.opacity = "0";
    // 600 ميلي ثانیه بعد div مخفی میشود (با زمان کمینگ مشابه)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  کیسه چاکن کیسه چاکن
کیسه چاکن کیسه چاکن
کیسه چاکن کیسه چاکن

کیسه چاکن کیسه چاکن

کیسه چاکن کیسه چاکن

کیسه چاکن کیسه چاکنکیسه چاکن کیسه چاکن