Halo sahabat harviacode.com… tentu kita sudah tidak asing dengan alert javascript bukan? Alert javascript merupakan cara yang paling mudah untuk menampilkan pesan. Sebenarnya selain alert, ada juga confirm yaitu untuk menampilkan kotak konfirmasi. Berikut ini adalah contoh penggunaan confirm dan alert menggunakan javascript.

Ketika kita jalankan maka akan muncul kotak konfirmasi. Jika kita menekan OK, maka akan muncul alert dengan pesan “Anda Menekan OK” dan jika kita menekan Cancel maka akan muncul pesan “Anda Menekan Cancel”. Sangat mudah dalam penggunaannya.

Tampilan kurang memuaskan.

alert javascript
Yang menjadi pemasalahan untuk alert maupun konfirm adalah tampilannya yang sulit untuk diubah. Ya.. alert dan konfirm tidak menggunakan element-element HTML seperti pada umumnya, sehingga kita akan kesulitan untuk mengubah tampilannya menjadi lebih menarik. Tampilan alert dan konfirm javascript juga tergantung pada browser yang digunakan. Jika anda pengguna bootstrap, maka tampilan alert dan konfirm akan terlihat contrast dengan tampilan theme bootstrap.

Gunakan Sweetalert

Untuk mengatasi permasalah tersebut di atas, anda bisa menggunakan sweetalert. Sweetalert akan mengubah tampilan alert dan konfirm menjadi lebih menarik. Berikut ini adalah contoh tampilan alert dan konfirm menggunakan sweetalert.

Cara menggunakan Sweetalert.

Cara penggunaan sweetalert sangat mudah. Berikut ini adalah langkah-langkah yang harus Anda lakukan.
1. Download sweet-alert.min.js dan sweet-alert.css
2. Masukkan bootstrap css, sweetalert css dan sweetalert js tersebut ke dalam file Anda, seperti contoh berikut ini.

3. Tambahkan html untuk membentuk kotak alertnya, sehingga file anda akan menjadi seperti ini.

4. Tambahkan javascript sesuai kebutuhan Anda. Sebagai contoh disini saya akan membuat alert success dengan tombol OK. maka index saya akan menjadi seperti berikut ini.

Dan berikut ini adalah hasilnya jika kita jalankan.

sweetalert
Contoh lain, misalnya anda ingin membuat konfirmasi anda bisa melakukannya dengan mengubah baris 51 menjadi seperti ini.

Dan berikut ini adalah hasilnya untuk konfirmasi..

sweetalert
Anda bisa melihat contoh contoh lain di sini.

Kini tampilan alert dan konfirmasi Anda menjadi lebih keren.. hehe.. mudah bukan… selamat mencoba, jika ada pertanyaan, saran, kritik jangan ragu untuk menuliskannya di kolom komentar.

Terima kasih telah berkunjung ke harviacode.com. Jangan lupa di like dan bantu share ya..