Bootstrap Snippet Succes and error using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Succes and error"
Bootstrap 3.3.0 Snippet by imatheusmoreira

Related: See More

Questions / Comments:

"Succes and error" Bootstrap 3.3.0 Snippet by imatheusmoreira

Related: See More

Questions / Comments:

"Succes and error"
Bootstrap 3.3.0 Snippet by imatheusmoreira