SweetAlert : تغییر ظاهر Alert مرورگرها

در این مطلب میخوام ابزاری رو بهتون معرفی کنم که با استفاده از اون میتونین ظاهر Alert رو در مرورگرها تغییر بدین. همونطور که میدونین ظاهر Alert در مرورگرهای مختلف با هم فرق میکنه و همچنین یک ظاهر خیلی ساده هست. پس بهتره که با استفاده از آموزشی که امروز براتون توضیح میدم ، ظاهر اونو زیباتر کنید.

تا اونجایی که من امتحان کردم بر روی IE9 به بالا هم بخوبی کار میکنه.

برای شروع باید به سایت SweetAlert مراجعه کنید و فایلهای مربوطه رو دریافت کنید. در این مطلب به فایلهای sweet-alert.css و sweet-alert.min.js نیاز داریم. من این فایلهارو در پایان همین مطلب براتون قرار دادم که میتونین از اونا استفاده کنید.

نحوه استفاده :

ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>7Learn.com - SweetAlert</title>
	<link rel="stylesheet" type="text/css" href="sweet-alert.css">
</head>
<body>
	<button id="error">Click here to see error</button>
	<script type="text/javascript" src="sweet-alert.min.js"></script>
	<script type="text/javascript">
	</script>
</body>
</html>

تا اینجا فقط کدهای Html رو قرار دادیم و فایلهای مربوطه رو اضافه کردیم و همچنین در آخر یک تگ Script قرار دادیم که کدهای Javascript خودمون رو در اونا بنویسیم. یک دکمه با id = error  هم ساختیم که با کلیک بر روی اون Alert بنمایش در بیاد.

بجای استفاده از دستور alert ما باید از تابع swal یا sweetAlert استفاده کنیم. این دو تابع دقیقا یک کار رو انجام میدن. در ادامه چند مثال از نحوه استفاده این ابزار رو براتون توضیح میدم.

پیام ساده :

با استفاده از روش زیر فقط یک باکس برای کاربر به نمایش در میاد و در اون یک متن ساده نوشته میشه.

کد :

document.querySelector('#error').onclick = function(){
	swal("Here's a message!")
};

در کد بالا ابتدا مشخص کردیم که زمانی که بر روی المنت error کلیک شد ، تابع swal اجرا بشه.

تصویر خروجی :

alert1

عنوان و متن برای توضیح :

در اینجا علاوه بر title میتونین یک متن هم قرار بدین.

کد :

document.querySelector('#error').onclick = function(){
	swal("Here's a message!", "It's pretty, isn't it?")
};

تصویر خروجی :

alert2

پیام error یا خطا :

در اینجا یک باکس ظاهر میشه و به کاربر علامت error رو نمایش میده.

کد :

document.querySelector('#error').onclick = function(){
	swal("Oops...", "Something went wrong!", "error");
};

تصویر خروجی :

 

alert3

اگه بجای error در کدها success بزارید ، یک چیزی مشابه تصویر زیر رو مشاهده خواهید کرد :

alert4

با استفاده از این ابزار کارای بسیار دیگه ای هم میتونین انجام بدین. من پیشنهاد میکنم که خودتون برید در سایتش و بیشتر در مورد این ابزار مطالعه کنید.

بعنوان یک مثال پیشرفته‌تر میتونم این کد رو در اختیارتون بزارم :

document.querySelector('#error').onclick = function(){
	swal({
		title: "Are you sure?",   
		text: "You will not be able to recover this imaginary file!",   
		type: "warning",   
		showCancelButton: true,   
		confirmButtonColor: "#DD6B55",   
		confirmButtonText: "Yes, delete it!",   
		closeOnConfirm: false }, 
		function(){   
			swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
		});
};

میبینید که یک شئ ( Object ) به اون پاس دادیم که چند خصوصیت ( Property ) داره. توضیح :

  • title : عنوان پیام
  • text : متن پیام
  • type : نوع پیام که میتونه error یا success یا warning باشه
  • showCancelButton : اگه مقدار این خصوصیت true باشه ، دکمه cancel نمایش داده میشه
  • confirmButtonColor : میتونین رنگ دکمه Confirm رو مشخص کنید
  • confirmButtonTextمتن نوشته شده بر روی دکمه confirm
  • closeOnConfirm : اگر false باشه ، اگر بر روی دکمه Confirm کلیک بشه ، alert بسته نمیشه
  • در قسمت آخر هم یک تابع نوشتیم که زمانی اجرا میشه که بر روی دکمه Confirm کلیک بشه.

خصوصیتهای زیادی دیگه ای هم داره که خودتون میتونین ببینید.

امیدوارم خوشتون اومده باشه و بدردتون بخوره.

موفق باشید. یا علی

[dl]لینک دانلود[/dl]

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲۲ دیدگاه
رضا ۱۵ دی ۱۳۹۸، ۲۰:۵۹
سلام دمتون گرم واسه امزوش. چندتا ی سوال داشتم ممنون میشم جواب بدین. این کد رو واسه سایت نوشتم:







site




<?php
if(isset($_POST["btn"]))
{
if(empty($_POST["username"]))
{
echo '

function JSalert(){
swal("A Basic JS alert by a plug-in");
ev.preventDefault();
return false;
}



';



}


else
{

$_SESSION["user"]=$_POST["username"];
header("location:site.php");
exit;


}
}

?>













وقتی رو دکمه کلیک میکنی و اون الرت رو نشون میده، صفحه اتوماتیک رفرش میشه . چجوری میشه از رفرش اتوماتیکش جلوگیری کرد؟

...

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

سوال سومم اینه که میشه ی باکس مثل همین باکس های swl ساخت منتها بدون کمک و لینک گرفتن از سایت /sweetalert.js.org و فقط با جاوا اسکریپت ؟؟؟
Mahmood Dabestani ۲۶ بهمن ۱۳۹۴، ۱۶:۰۱
درود بر شما.
متاسفانه بنده کد نویسی بلد نیستم.
تو فایل جاوا اسکریپتش این شرط نوشته شده
if (params.closeOnConfirm) {
sweetAlert.close();
}
میشه خواهش کنم بفرمایید چه دستوری برای توقف ویدئو باید وارد کنم؟
محمد اسفندیاری ۱۰ اسفند ۱۳۹۴، ۱۰:۰۳
این مورد چه ربطی به Video داره؟
Mahmood Dabestani ۲۱ بهمن ۱۳۹۴، ۱۵:۵۵
چرا به کامنت بنده جواب نمیدید؟
Mahmood Dabestani ۱۲ بهمن ۱۳۹۴، ۱۶:۳۰
سلام بر شما جناب اسفندیاری عزیز.
بی نهایت ازتون ممنونم چون خیلی این مطلب به کار بنده اومد.
بنده از این پیغام تو سایتم استفاده کردم. به این صورت که وقتی روی تصاویری که تو اسلایدر بالایی سایتم قرار دارند کلیک میکنید ویدئوی مربوط به اون تصویر توی sweet alert نمایش داده میشه.
اما بنده به مشکلی با این پیغام برخورد کردم و اونم اینکه وقتی پاپ آپی که ویدئوی در حال بخش توش هست رو میبندم ، پاپ آپ بسته میشه ولی صدای ویدئو قطع نمیشه.
میخواستم خواهش کنم اگه ممکنه به سایت بنده مراجعه بفرمایید و در قسمت بالا ، بخش (ویدئو های تربیتی ) روی یکی از تصاویر اسلایدر کلیک کنید و اجازه بدید تا ویدئو پخش بشه.
این ( https://www.arize.ir )آدرس سایت بنده است.
وقتی روی دکمه ی (بستن) کلیک می کنید با این که پاپ آپ بسته میشه ولی صدای ویدئو قطع نمیشه.
این مشکل رو چطور میتونم حل کنم؟
بی نهایت سپاس.
لقمان آوند ۲۶ بهمن ۱۳۹۴، ۰۷:۵۷
سلام
آقای اسفندیاری چند مدتی هست که نیستند توی سایت. ایشالله ماه آینده مجددا بر می گردند.
برای رفع این مورد باید کمی کد جاوااسکریپت بزنید. باید مستندات این پلاگین و پلاگین پخش ویدیوتون رو بخونید و تعین کنید در هنگام بستن آلرت اگر ویدیویی در حالت پخش هست متوقف بشه ...
Mahmood Dabestani ۲۲ شهریور ۱۳۹۴، ۰۷:۳۵
ای استاد بزرگ
میشه خواهش کنم کد این رویدادی که میفرمایید رو بدید؟
محمد اسفندیاری ۲۲ شهریور ۱۳۹۴، ۲۱:۴۵
بفرمایید دوست عزیز ....یه همچنین چیزی میشه:

[cc] window.onload = function(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false },
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
};[/cc]
Mahmood Dabestani ۲۲ شهریور ۱۳۹۴، ۰۶:۳۳
لطفا اونایی که اسپم شدن رو بررسی بفرمایید و پاسخ بدید.
بنده بی صبرانه منتظرم.
Mahmood Dabestani ۲۲ شهریور ۱۳۹۴، ۰۲:۵۶
اصلا هیچ پیغامی مبنی بر ثبت کامنتم نشون داده نمیشه.
همشون اسپم میشه.
لطفا بررسی کنید.
محمد اسفندیاری ۲۲ شهریور ۱۳۹۴، ۰۴:۴۸
این کامنتتون به درستی نشون داده شده
مشکلی نداره
Mahmood Dabestani ۲۲ شهریور ۱۳۹۴، ۰۲:۴۶
سلام بر شما.
عذر میخوام یه سوال داشتم.
این سایت بنده است http://www.arize.ir مدتها بود دنبال چنین پیغامی واسه سایتم میگشتم.
بنده طبق فرموده ی شما به سایت sweet alert مراجعه کردم و طبق دستوراتش فایل های جاوااسکریپت و استایلش رو تو هاستم آپلود کردم و آدرس فراخوانی فایل ها رو هم تو فایل header قالبم قرار دادم.
اما نمیدونم چطور باید کد پیغام مورد نظرم رو فراخوانی کنم.
راستش میخوام پیغام مورد نظرم با ورود کاربر یه سایتم ظاهر بشه نه با فشردن روی یه دکمه ی خاص.
ممنون میشم راهنمایی بفرمایید.
محمد اسفندیاری ۲۲ شهریور ۱۳۹۴، ۰۶:۵۴
ببینید دوست عزیز در این مثالهایی که من زدم از رویداد کلیک استفاده شد. شما میتونین از رویداد load از document یا window استفاده کنید
موفق باشید
shima a ۱۴ تیر ۱۳۹۴، ۱۵:۵۶
سلام فایل هارو یک بار دیگه از خو د سایت دانلود کردم درست شد
تشکر
محمد اسفندیاری ۱۴ تیر ۱۳۹۴، ۱۶:۲۶
خوبه
موفق باشید
shima a ۱۴ تیر ۱۳۹۴، ۱۵:۱۱
سلام تشکر بخاطر مطلب خوبتون. من به سایتی که گذاشتید رفتم خیلی گزینه های جالبی داشت و چیزی که میخاستم رو پیدا کردم همون حالتی که باکس پیغام به طور خودکار بسته میشه و دکمه اکی هم نداره(A message with auto close timer). اما متاسفانه وقتی کد رو برای خودم استفاده کردم دکمه اکی رو نمایش میده.
showConfirmButton رو هم طبق کد فالس کردم لطفا هرکس میدونه اشکال از کجاست راهنمایی کنه
تشکر
محمد ۱۶ آذر ۱۳۹۳، ۱۹:۳۷
چه مطلب جالبی رو گذاشتی , ممنونم
محمد اسفندیاری ۱۶ آذر ۱۳۹۳، ۲۱:۰۷
خواهش میکنم دوست عزیز
موفق باشی
mehdifallah ۱۶ آذر ۱۳۹۳، ۱۰:۴۰
خیلی زیباست و البته کارآیی خوبی میتونه داشته باشه. البته من الان با IE11 وارد این آدرس دمو شدم و کار نکرد. و در کنسول صفحه خطای زیر رو نشون می‌داد:
SCRIPT438: Object doesn't support property or method 'querySelector'
File: index1.html, Line: 13, Column: 1
:!:
باز هم ممنون از نکات جالبی که در اختیار علاقمندان قرار میدین.
محمد اسفندیاری ۱۶ آذر ۱۳۹۳، ۱۳:۴۹
منم بار اول که در IE نگاه کردم همین مشکل شمارو داشتم ، ولی الان که نگاه میکنم باز میکنه!!
شاید مشکل از استفاده از querySelector باشه.....شما میتونین از jQuery یا ... استفاده کنید ، شاید این مشکلو برطرف کنه
یا میتونین به صفحه Github این مطلب برید و در بخش مشکلات اون رو بیان کنید
موفق باشید
وحید صالحی ۱۶ آذر ۱۳۹۳، ۱۰:۰۸
بسیار عالی و کاربردی ممنون محمد جان...
محمد اسفندیاری ۱۶ آذر ۱۳۹۳، ۱۳:۴۱
خواهش میکنم موفق باشی داش وحید