<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css"> <div class="container"> <div class="row"> <h2> Con evento click </h2> <div class="notification notification-success logged-out"> You logged out successfully! </div> <div class="notification notification-error logged-oute"> You logged out successfully! </div> <a href="#" class="btn btn-success btn-lg btn-logout"> Success </a> <a href="#" class="btn btn-danger btn-lg btn-logoute"> Error </a> </div> </div> <div class="container"> <div class="row"> <h2> Con funcion independiente </h2> <div class="notification "> You logged out successfully! </div> <a href="#" class="btn btn-success btn-lg " onclick='message("El usuario se logeo correctamente","success");'> Success </a> <a href="#" class="btn btn-danger btn-lg " onclick='message("Error - Error 303 :(","error");'> Error </a> </div> </div>

/* Notifications */ .notification{ position:fixed; top: 20px; right:0; background-color:#FF4136; padding: 20px; color: #fff; font-size:21px; display:none; } .notification-success{ background-color:#3D9970; } .notification-show{ display:block!important; } .notification-error{ background-color:#A62D26; }

$(document).ready(function() { $('.btn-logout').click(function(){ // Notification $('.notification.logged-out').removeClass('bounceOutRight notification-show animated bounceInRight'); // show notification $('.notification.logged-out').addClass('notification-show animated bounceInRight'); $('.notification.logged-out').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ setTimeout(function(){ $('.notification.logged-out').addClass('animated bounceOutRight'); }, 800); }); }); $('.btn-logoute').click(function(){ // Notification $('.notification.logged-oute').removeClass('bounceOutRight notification-show animated bounceInRight'); // show notification $('.notification.logged-oute').addClass('notification-show animated bounceInRight'); $('.notification.logged-oute').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ setTimeout(function(){ $('.notification.logged-oute').addClass('animated bounceOutRight'); }, 800); }); }); }); function message(msj, tipo){ //Setemos la notificacion //Removemos clases $('.notification').removeClass('notification-error'); $('.notification').removeClass('notification-succes'); //Limpiados el msj $('.notification').empty(); //Ingresamos msj $('.notification').append( msj ); // Notification $('.notification').removeClass('bounceOutRight notification-show animated bounceInRight'); // show notification $('.notification').addClass('notification-show notification-'+tipo+' animated bounceInRight'); $('.notification').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ setTimeout(function(){ $('.notification').addClass('animated bounceOutRight'); }, 800); }); }