بررسی کلی وبسایت رسمی
جایگزینی زیبا، پاسخگو، قابل تنظیم و قابل دسترسی (WAI-ARIA) برای جعبههای پاپ آپ جاوا اسکریپت
پایه#
<button type="button" class="btn btn-primary" id="sweetalert-basic">به من کلیک کن</button>
if (document.getElementById("sweetalert-basic"))
document.getElementById("sweetalert-basic").addEventListener("click", function () {
Swal.fire({
title: 'هر احمق میتواند از کامپیوتر استفاده کند',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
showCloseButton: true
})
});
عنوان با متنی زیر#
<button type="button" class="btn btn-primary" id="sweetalert-title">به من کلیک کن</button>
//عنوان با متنی زیر
if (document.getElementById("sweetalert-title"))
document.getElementById("sweetalert-title").addEventListener("click", function () {
Swal.fire({
title: "اینترنت؟",
text: 'آیا هنوز هم وجود دارد؟',
icon: 'question',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
})
});
پیام#
<button type="button" class="btn btn-success" id="sweetalert-success">موفقیت</button>
<button type="button" class="btn btn-warning" id="sweetalert-warning">اخطار</button>
<button type="button" class="btn btn-info" id="sweetalert-info">اطلاعات</button>
<button type="button" class="btn btn-danger" id="sweetalert-error">خطا</button>
//پیام موفقیت
if (document.getElementById("sweetalert-success"))
document.getElementById("sweetalert-success").addEventListener("click", function () {
Swal.fire({
title: 'کار خوب!',
text: 'شما بر روی دکمه کلیک کردید!',
icon: 'success',
showCancelButton: true,
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
cancelButtonClass: 'btn btn-danger w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
})
});
//پیام خطا
if (document.getElementById("sweetalert-error"))
document.getElementById("sweetalert-error").addEventListener("click", function () {
Swal.fire({
title: 'اوه...',
text: 'چیزی اشتباه است!',
icon: 'error',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
footer: '<a href="">چرا این مشکل را دارم؟</a>',
showCloseButton: false
})
});
//پیام اطلاعات
if (document.getElementById("sweetalert-info"))
document.getElementById("sweetalert-info").addEventListener("click", function () {
Swal.fire({
title: 'اوه...',
text: 'چیزی اشتباه است!',
icon: 'info',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
footer: '<a href="">چرا این مشکل را دارم؟</a>',
showCloseButton: false
})
});
//پیام اخطار
if (document.getElementById("sweetalert-warning"))
document.getElementById("sweetalert-warning").addEventListener("click", function () {
Swal.fire({
title: 'اوه...',
text: 'چیزی اشتباه است!',
icon: 'warning',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
footer: '<a href="">چرا این مشکل را دارم؟</a>',
showCloseButton: false
})
});
پیام تصاویر محتوای طولانی#
<button type="button" class="btn btn-primary" id="sweetalert-longcontent">به من کلیک کن</button>
// محتوای طولانی
if (document.getElementById("sweetalert-longcontent"))
document.getElementById("sweetalert-longcontent").addEventListener("click", function () {
Swal.fire({
imageUrl: 'https://placeholder.pics/svg/300x1500',
imageHeight: 1500,
imageAlt: 'یک تصویر بلند',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
})
});
پارامتر#
<button type="button" class="btn btn-primary" id="sweetalert-params">به من کلیک کن</button>
//پارامتر
if (document.getElementById("sweetalert-params"))
document.getElementById("sweetalert-params").addEventListener("click", function () {
Swal.fire({
title: 'آیا مطمئن هستید؟',
text: "شما نمیتوانید این را برگردانید!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'بله، حذفش کن!',
cancelButtonText: 'نه، لغو کن!',
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
cancelButtonClass: 'btn btn-danger w-xs mt-2',
buttonsStyling: false,
showCloseButton: false
}).then(function (result) {
if (result.value) {
Swal.fire({
title: 'حذف شد!',
text: 'فایل شما حذف شده است.',
icon: 'success',
confirmButtonClass: 'btn btn-primary w-xs mt-2',
buttonsStyling: false
})
} else if (
// درباره مدیریت لغوها بیشتر بخوانید
result.dismiss === Swal.DismissReason.cancel
) {
Swal.fire({
title: 'لغو شد',
text: 'فایل خیالی شما ایمن است :)',
icon: 'error',
confirmButtonClass: 'btn btn-primary mt-2',
buttonsStyling: false
})
}
});
});