Mempercantik Alert JavaScript dengan SweetAlert
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..
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
- Simple Responsive Jquery Accordion
- Membuat Custom Style Alert Box Javascript
- Action Form dengan Select tanpa Tombol Submit
- Penjumlahan Otomatis textbox dengan Jquery
- Cara Mudah Menampilkan Data dengan DataTables
- Membuat Auto Refresh di Website dengan Jquery
- Menampilkan data Berdasarkan Selectbox dg Javascript
- Cara menghilangkan Menubar dan Status bar di TinymCe4
- Menjalankan dua function pada satu event di javascript
- Membuat Sliedshow Image Galery lightbox Seperti Facebook