Membuat Auto Close (Auto Dismiss) Bootstrap Alerts

Membuat Auto Close (Auto Dismiss) Bootstrap Alerts – Pesan pemberitahuan atau notificication biasanya digunakan dalam sebuah aplikasi atau website untuk memberitahu suatu aksi yang telah selesai dikerjakan. Sebagai contoh, jika user telah melakukan input data melalui form yang telah disediakan dan melakukan submit data tersebut biasanya akan muncul pesan kurang lebih “Data Berhasil Disimpan”. Selain itu mungkin saat user menghapus suatu data dan berhasil menghapusnya maka akan muncul pesan “Data Berhasil Dihapus”. Tentu saja pesan tersebut disesuaikan dengan keperluan yang bisa diubah-ubah.

Untuk menampilkan pesan pemberitahuan atau notification, Bootstrap telah menyediakan alert untuk membantu menampilkan suatu pesan pemberitahuan. Namun, jika user telah selesai dengan suatu activity dalam aplikasi atau website tersebut dan alert tersebut tidak segera hilang tentu saja akan sedikit mengganggu karena user telah selesai dengan activity tersebut. Dalam artikel ini akan membahas bagaimana cara agar alert tersebut otomatis menghilang atau auto close/auto dismiss dalam jangka waktu tertentu. Sebagai contoh akan dibuatkan pesan pemberitahuan “Sukses! Data Berhasil Disimpan” dengan jenis alert success (berwarna hijau). Tentu saja untuk teks alert tersebut bebas akan diisi apa dan jenis alert yang akan digunakan (menyesuiakan dengan kebutuhan aplikasi atau website).

Script Alert Bootstrap

Untuk membuat pesan pemberitahuan atau notification tentu saja hal wajib untuk menampilkannya adalah dengan membuat alert bootstrap. Dalam contoh ini script alert yang digunakan seperti dibawah ini.

<div class="alert alert-success" role="alert">
  <strong>Sukses!</strong> Data berhasil Disimpan
</div>

Seperti yang sudah dijelaskan sebelumnya, contoh disini akan membuat pesan pemberitahuan  berupa “Sukses! Data Berhasil Disimpan” dengan alert berwarna hijau (alert-success). Untuk membuat alert tersebut otomatis menghilang atau auto close/auto dismiss diperlukan script tambahan.

Script untuk Auto Close/Auto Dismiss

Script dibawah ini adalah script yang akan menghilangkan alert tersebut secara otomatis atau auto close/auto dismiss.

<script>
  window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
      $(this).remove(); 
    });
  }, 5000);
</script>

Dalam script tersebut alert akan otomatis menghilang dalam durasi 5 detik (5000 ms). Satuan dalam script diatas adalah millisecond. Sehingga jika menginginkan alert menghilang dalam durasi 3 detik maka cukup angka 5000 tersebut menjadi 3000. Tentu saja durasi tersebut disesuaikan dengan kebutuhan aplikasi atau website. Sebagai demo lengkap dapat dilihat dibawah ini.

See the Pen
Auto Close Bootstrap Alerts by Bayu S. Ajie P. Putra (@bayusapp)
on CodePen.

Happy Coding ^-^