Membuat Notifikasi dengan Bootstrap dan Javascript

Membuat tampilan website yang sangat mudah digunakan oleh semua orang cukup rumit. Karena kita harus tahu berbagai macam aspek seperti misalnya permainan warna, tingkah laku pengguna seperti apa, perancangan layout harus bagaimana agar pengunjung tidak bingung saat melihat website kita dan lain-lain. Hal ini harus dipelajari dengan sering mengamati keadaan sekitar dan juga tentu berdasarkan pengalaman yang cukup lama.

Sebagai contohnya adalah seperti pada saat pengisian form. Bagaimana caranya kita agar pengunjung tahu hal apa saja yang harus diisi dan memberikan informasi berdasarkan petunjuk yang ada pada website kita seperti misalnya notifikasi. Berbicara tentang notifikasi, pada artikel kali ini kita akan mencoba membuat notifikasi dengan Bootstrap dan Javascript. Dengan sedikit pengetahuan tentang bootstrap dan javascript kalian bisa membuat sebuah alert untuk memberitahu kepada pengunjung bahwa ada informasi yang harus diketahui. Oke langsung saja kita mulai dengan menyalin code dibawah ini.

alert.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Alert Bootstrap & Javascript </title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
  </head>
  <body>
    <div class="col-md-3" style="margin-top:10px;">
        <div class="product-options">
            <a  id="alert" href="javascript:;"  class="btn btn-primary" >Test Alert </a>
            <a  href="" class="btn btn-mini"> Tombol Biasa </a>
        </div>
        <br>
        <div class="col-md-5 alert alert-success" id="success-alert">
            <button type="button" class="close" data-dismiss="alert">x</button>
            <strong>Success! </strong>
            Alert berhasil muncul
        </div>
    </div>    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script>
      $(document).ready (function(){
            $("#success-alert").hide();
            $("#alert").click(function showAlert() {
                $("#success-alert").alert();
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
                   $("#success-alert").slideUp(500);
                });   
            });
      });

    </script>
  </body>
</html>

Setelah sudah kalian bisa save, dan lihat hasilnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

Tampilan biasanya.

Tampilan saat mengklik tombol alert, muncul notifikasi berwarna hijau sebagai tanda bahwa tombol tersebut sudah ditekan.

Lalu pesan alert tersebut akan hilang dengan sendirinya tidak lama setelah pesan tersebut muncul.

Mudah bukan ?

Sekian pembahasan mengenai membuat notifikasi dengan Bootstrap dan Javascript. Semoga bermanfaat.