alert box dengan fungsi animasi

Terinpirasi dari postingan Kang ismet tentang Dialog box,tertarik juga untuk membuat postingan serupa akan tetapi dengan tampilan,script,dan kode yang berbeda karena Admin tidak mau berurusan dengan kang Ismet tentang masalah Copas karena bisa berakibat Fatal kalau di bilang latah ....bolehlah...he he he lagian Admin tidak ada ide untuk membuat tutorial yang lain
Untuk Demo alert box dengan fungsi animasi nya dapat sobat liat saat pertama membuka postingan ini ,berikut cara membuatnya :

1. Pasang Jquery berikut tepat di atas  </head>

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>

2. Selanjutnya taruh Css berikut tepat di atas kode ]]></b:skin> atau </style>
   

   
   #bgbox-info{width:100%;
   height:100%;
   background:#000;
   position:fixed;
   left:0;top:0;display:none}
   #dialog-box {
       background: none repeat scroll 0 0 #174A87;
       border: 2px solid #333333;
       border-radius: 10px;
       box-shadow: 0 0 3px 2px #000000 inset;
       color: #FFFFFF;
       height: 200px;
       left: 130%;
       padding: 10px;
       position: fixed;
       text-align: center;
       top: 25%;z-index:1000;
       width: 350px;display:none
   }   
   #kotak-muncul {
   background : none 0 0 repeat scroll #174A87;
   border : #333333 solid 2px;
   border-radius : 10px;
   box-shadow : 0 0 3px 2px #000000 inset;
   color : #FFFFFF;
   height : 200px;
   left : 130%;
   padding : 10px;
   position : fixed;
   text-align : center;
   top : 25%;
   width : 350px;
   display : none;
   z-index : 1000;
   }
   #kotak-muncul:before {
   content : "\f059 ";
   font-family : fontAwesome;
   font-size : 4em;
   position : absolute;
   bottom : 50px;
   left : 150px;
   }
   #tutup {
   width : 20px;
   height : 20px;
   background : #000;
   padding : 5px;
   border-radius : 25px;
   position : absolute;
   top : -20px;
   left : -15px;
   cursor : pointer;
   border : #fff solid 2px;
   }

3. dan yang terakhir silahkan pasang Html sekaligus fungsi jquerynya tepat di atas kode </body>

   <div id="bgbox-info">
   </div>
   
   <div id="kotak-muncul">
   <div id="tutup">
   X</div>
   Dengan menggunakan Jquery animate kita bisa membuat sebuah alert box tampil slide dari samping kanan ke kiri(sebaliknya)bahkan 
   kita bisa membuat sebuah Alert Box seperti memantul ke atas dan ke bawah  </div>
   <script type="text/javascript">
   //<![CDATA[
   $(document).ready(function(){
       $("#kotak-muncul").show().animate({left:"40%"});
       $('#bgbox-info').fadeTo("normal", 0.4).css({transition:"1s"});
       $("#tutup").click(function(){ 
           $('#bgbox-info').fadeOut(2000);
           $("#kotak-muncul").animate({top:"10%"}).animate({top:"30%"}).animate({top:"10%"}).animate({top:"30%"}).animate({top:"10%"}).animate({top:"130%"});
       });  
   });
   
   //]]>
   </script>

Silahkan berexperiment dengan Jquery animate ini sobat bisa memodifikasinya untuk menjadi lebih keren


Spesial Thanks : Kang Ismet

X

Dengan menggunakan Jquery animate kita bisa membuat sebuah alert box tampil slide dari samping kanan ke kiri(sebaliknya)bahkan
kita bisa membuat sebuah Alert Box seperti memantul ke atas dan ke bawah

Judul Artikel :alert box dengan fungsi animasi

Terima Kasih Sobat sudah membaca Artikel saya Tentang alert box dengan fungsi animasi Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih