Bootstrap Snippet Sticky Alert using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
<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 ---------->
<div class="container">
    <div class="row">
        <div class="popupunder alert alert-success fade in"><button type="button" class="close close-sm" data-dismiss="alert"><i class="glyphicon glyphicon-remove"></i></button><strong>Success : </strong> The update process has been completed successfull!</div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.popupunder{
    width: 300px;
    position:fixed;
    top: 10px;
    right: 10px;
    z-index: 10;
    border: 0;
    padding: 20px;
}
.popupunder.alert-success{
    border: 1px solid #198b49;
    background:#27AE60;
    color:#fff;
}
.popupunder .close{
    font-size: 10px;
    position:absolute !important;
    right: 2px;
    top: 3px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
$('.popovers').popover();
window.setTimeout(function() {
$(".alert").fadeTo(2000, 500).slideUp(500, function(){
$(this).remove(); 
});
// 500 : Time will remain on the screen
}, 500);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Sticky Alert"
Bootstrap 3.3.0 Snippet by Eflatun

Related: See More

Questions / Comments:

"Sticky Alert" Bootstrap 3.3.0 Snippet by Eflatun

Related: See More

Questions / Comments:

"Sticky Alert"
Bootstrap 3.3.0 Snippet by Eflatun