Sweet Alert Tasarımları

Sosyal Medya Hesaplarım:
Youtube Discord Github

Sweet Alert Bilgileri:
Sitesine Gitmek İçin Tıkla





Dikkat:

Bilgiler İçin Tıkla

Örnekler:

Onaylanma Mesajı: 

  Swal.fire({
        icon: 'success',
        title: 'Başarılı!',
        text: 'Yaptığın İşlem Başarıyla Tamamlandı!',
        confirmButtonColor:"#11bdac",
        confirmButtonText: "Tamamdır"
      })

Reddedilme Mesajı: 

 Swal.fire({
            icon: 'error',
            title: 'Hopp!',
            text: 'Hatalı işlem uygulandı!',
            confirmButtonColor:"#11bdac",
            confirmButtonText: "Tamamdır"
          })

Soru Mesajı: 

  Swal.fire({
              icon: 'question',
              title: 'Bir Saniye',
              text: 'Devam Etmek İstiyor Musun?',
              confirmButtonColor:"#11bdac",
              confirmButtonText: "Evet"
            })

Bilgi Mesajı: 

    Swal.fire({
            icon: 'info',
            title: 'Dikkat!',
            text: 'Buradan sonrası hazır değil.',
            confirmButtonColor:"#11bdac",
            confirmButtonText: "Devam Et"
          })

Footer Tasarımı: 

        Swal.fire({
            title: 'Webmaster',
            text: 'Slipknot#2494 (discord)',
            confirmButtonColor:"#11bdac",
            confirmButtonText: "Napim",
            footer: 'Design By Slip_Bey'
          })

Evet Hayır: 

        Swal.fire({
            title: 'Bir Saniye',
            text: "Hangisini Tercih Ediyorsun?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sil',
            cancelButtonText: 'Silme!'
            }).then((result) => {
        if (result.isConfirmed) {
        Swal.fire({
            icon: 'success',
            title: 'Başarılı!',
            text: 'Yaptığın İşlem Başarıyla Tamamlandı!',
            confirmButtonColor:"#11bdac",
            confirmButtonText: "Tamamdır"
        })
        }
    })

Resimli: 

var rsm = "pengufoto.png"

Swal.fire({
title: 'Penguenler Hakkında',
text: 'Penguenler Bir Dinazordur(!)',
imageUrl: rsm,
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
confirmButtonColor: '#11bdac',
confirmButtonText: 'Tamam',
})

Sorulu: 

Swal.mixin({
input: 'text',
confirmButtonText: 'İlerle →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
title: 'Soru 1',
text: 'Adın Ne'
}, {
title: 'Soru 2',
text: 'Yaşın kaç'
}, {
title: 'Soru 3',
text: 'Mesleğin ne'
}
]).then((result) => {
if (result.value) {
const cevaplar = JSON.stringify(result.value)
Swal.fire({
icon: success,
title: 'Başarılı!',
html: `Cevapların: 
 ${cevaplar} `,
confirmButtonColor: '#3085d6',
confirmButtonText: 'Tamamdır',
cancelButtonText: 'Silme!',
cancelButtonColor: '#d33'
})
}
})

IP Adresini Çekme: 

const ipAPI = '//api.ipify.org?format=json'
Swal.queue([{
title: 'IP Adresini Görmek ister misin ?',
confirmButtonColor: '#3085d6',
confirmButtonText: 'Gör',
text: 'Görmek İstersen Tıkla!',
showLoaderOnConfirm: true,
preConfirm: () => {
return fetch(ipAPI)
.then(response => response.json())
.then(data => Swal.insertQueueStep(data.ip))
.catch(() => {
Swal.insertQueueStep({
icon: 'error',
title: 'İşlem Başarısız!',
text: 'IP Adresinizi Çekemedim!',
confirmButtonColor:"#11bdac",
confirmButtonText: "Tamamdır"
})
})
}
}])