Mempercantik Alert JavaScript dengan SweetAlert
juragan coding - yuhu sahabat codig kali ini hadir kembali dalam edisi tutorial, dan kali ini gw akan berbagi tutorial mengenagi cara merubah tampilan javascript agar terlihat cantik dengan sweetalert, belum tau apa itu sweetalert ? silahkan cari di google
untuk tampilan interfaces nya silahkan lihat di gambar di atas
Tutorial Merubah Tampilan Alert Javascript
- Download file master di disini
- Extract file tersebut.
- Copy folder dist ke folder project.
Setelah file css dan js sweet alert telah terdapat pada project kita, maka loadkedua file tersebut dalam file html kita. Dan kita bisa menampilkan alert darisweet alert dengan memanggil fungsi berikut:
swal("Good job!", "You clicked the button!", "success");untuk keseluruhan code nya silahkan salin di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert</title>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<script type="text/javascript" src="dist/sweetalert.min.js"></script>
</head>
<body>
<button onclick="classic()">Normal Alert</button>
<button onclick="sweet()">Sweet Alert</button>
<script>
function normal () {
alert("Normal Alert!");
}
function sweet (){
swal("Good job!", "You clicked the button!", "success");
}
</script>
</body>
</html>