سلام برنامه | HiProgram

امروز سلام برنامه برای شما آموزش تصویری ساخت باکس اخطار (alert) را آماده کرده است

آموزش تصویری ساخت باکس اخطار (alert) برای نمایش اعلان های سایت بسیار کاربردی است.

این باکس دارای تایم و کلید ضربدر (close) می باشد که کاربر در صورت نیاز بتواند آن را ببندد.

از باکس اخطار در موارد مختلفی استفاده می شود مثل نشان دادن پیغام های مناسبتی ، در خواست کاری از کاربر و …

کاربرد اصلی این افزونه میتواند در پیغام های خطا و یا پیام های دریافتی باکس پیام و یا حتی ناتیفیکیشن اشاره کرد

ما این باکس را تنها با html و css می سازیم

برای طراحی باکس اخطار (َAlert) ابتدا باید کد های زیر را در قسمت body وارد کنید

<div class="alert">
<span class="closebtn">&times;</span>
<strong>اخطار!</strong> متن نمایشی خود را جایگزین کنید. 
</div>

 سپس برای استایل دهی و نمایش ظواهر باید کد های زیر را به css خود اضافه کنید

.alert{
	padding:20px;
	background:#f44336;
	color:#fff;
	opacity:1;
	transition:opacity 0.6s;
	margin-left:15px;
}

.closebtn{
	margin-left:10px;
	color:#fff;
	font-weight:bold;
	float:left;
	font-size:22px;
	line-height:20px;
	cursor:pointer;
	transition:0.3s;
}
.closebtn:hover{
	color:#000;
}

و در نهایت برای اجرای باکس کد های جاوا اسکریپت زیر را به انتهای کد های html خود باکس اضافه کنید

<script>
var close = document.getElementsByClassName("closebtn");
var i;
for(i = 0 ; i , close.length ; i++){
	close[i].onclick = function(){
		var div = this.parentElement;
		div.style.opacity = "0";
		setTimeout(function(){ div.style.display = "none";},600);}
}
</script>

کار طراحی باکس اخطار تمام است

شما می توانید برای مشاهده  جزئیات بیشتر ویدیو آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید