Mempercantik Alert JavaScript dengan SweetAlert

Publish Date : 20-01-2017 , dibaca 9773 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini kita akan Membahas Cara Mempercantik Alert Javascript dengan Menggunakan library SeetAlert , alert atau kotak dialog yang ada di javascript secara default tampak simple,terlalu sederhana, tidak memberikan kesan style yang elegan oleh user, script alert pilihan, peringatan / warning tampak sama saja, sehingga ini tentunya bukan user friendlly

Bentuk konfirmasi yang bisa di dapatkan di javascript , biasanya berbentuk modal yang di tampilkan di browser client, yang digunakan untuk validasi user, baik dalam penginputan form , maupun sebagai pesan yang ingin disampaikan oleh programer kepada pengguna / user.

Cara Mempercantik Alert / Kotak Dialog Javascript

Berikut ini merupakan cara yang dapat digunakan, yang bisa dijadikan pilihan untuk anda dalam memodifikasi tampilan alert Javascript agar lebih indah..

mempercantik alert dengan javascript

SAMPLE CODE :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sweet Alert - Example</title>
<link rel="stylesheet" href="dist/sweetalert2.min.css">
</head>
<body>    
    
<button type="button">Click me</button>        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="dist/sweetalert2.min.js"></script>        

<script>
$(document).ready(function(){
      /* Call Simple Alert on Button Click  */
     $('button').click(function(){            
          sweetAlert('Simpel Alert');   
          // or can be swal('Simpel Alert');
     });
})
</script>        
</body>
</html>

Untuk documentasi lengkapnya silahkan download dan lihat disini

Produk Rekomendasi

Artikel Terkait

Diskusi



wa
Close