Cara membuat auto close alert bootstrap 4
membuat alert di bootstrap tentu sangan kita butuhkan ketika kita membuat sebuah aplikasi, tujuannya adalah tak lain menginfokan kepada pengguna tentang hasil yang sudah di proses, misal menginput data karyawan maka akan lebih baik dan informatif jika ada pesan notifikasi di aplikasi yang di buat yang menginfokan ke pengguna tentang proses yang sudah dilakukannya.
Jadi pengguna bisa mengetahui notifikasi proses yang telah dilakukan, nah pada kesempatan kali ini kita akan membahas cara membuat auto close alert bootstrap, jadi ketikan proses dilakukan oleh pengguna muncul notifikasi lalu notifikasi tersebut akan hilang dengan sendirinya, nah bagaimana cara membuatnya? mari simak tutorial berikut
di bawah ini adalah script Cara membuat auto close alert bootstrap 4, silahkan anda copy dan pastekan script berikut kemudian silahkan simpan dengan ekstensi html atau php, misal di sini saya menyimpannya dengan nama alert.php kemudian simpan di direktory c:/xampp/htdocs/alert.php
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body{
padding: 25px;
margin : 200px:
}
</style>
</head>
<body>
<div class="alert alert-success" role="alert">
<strong>Sukses!</strong> Data Berhasil Disimpan
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</body>
<script type="text/javascript">
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
</script>
</html>
nah langkah selanjutnya saya running kode tersebut di browser (pastikan web server service sudah running) dengan mengetikkan localhost/alert.php maka saya mendapatkan hasil sebagai berikut ini
gambar di atas adala hasil dari file alert.php yang dijalankan, untuk mengatur time hide anda bisa merubahnya di script javascript berikut ini
<script type="text/javascript">
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000); //rubah angka 5000 menjadi 2000 maka notifikasi akan hilang dalam 2 detik
Teman - teman bisa meribah timing notifikasi sesuai keinginan, nah bagaimana? mudah bukan? pastinya mudah ya, silahkan di coba dan dipraktekkan tetap semangat dan jangan pernah menyerah.
Selamat Mencoba
