"Page alerts"
Bootstrap 3.2.0 Snippet by Cyruxx

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="page-alerts">
<div class="alert alert-success page-alert" id="alert-1">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info page-alert" id="alert-2">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning page-alert" id="alert-3">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger page-alert" id="alert-4">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success page-alert" id="alert-5">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Cool!</strong> This alert will close in 3 seconds. The data-delay attribute is in milliseconds.
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Page Alerts</h2>
<hr>
<p>Click a button to show an alert.<br><br>Made with <i class="fa fa-fw fa-heart text-danger"></i> by ·
<a class="btn btn-primary btn-xs" href="http://twitter.com/AlexMahrt" target="_blank"><i class="fa fa-fw fa-twitter"></i> @AlexMahrt</a><br><br></p>
<hr>
<div class="row">
<div class="col-md-2"><button data-toggle="page-alert" data-toggle-id="1" class="btn btn-success btn-block">Show success</button></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Not necessary for page alerts */
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
button {
margin-bottom: 3px;
}
/* REQUIRED */
.page-alerts {
margin-bottom: 20px;
}
.page-alerts .page-alert {
border-radius: 0;
margin-bottom: 0;
}
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
$(function() {
$('.page-alert').hide();
//Show alert
$('button[data-toggle="page-alert"]').click(function(e) {
e.preventDefault();
var id = $(this).attr('data-toggle-id');
var alert = $('#alert-' + id);
var timeOut;
alert.appendTo('.page-alerts');
alert.slideDown();
//Is autoclosing alert
var delay = $(this).attr('data-delay');
if(delay != undefined)
{
delay = parseInt(delay);
clearTimeout(timeOut);
timeOut = window.setTimeout(function() {
alert.slideUp();
}, delay);
}
});
//Close alert
$('.page-alert .close').click(function(e) {
e.preventDefault();
$(this).closest('.page-alert').slideUp();
});
//Clear all
$('.clear-page-alerts').click(function(e) {
e.preventDefault();
$('.page-alert').slideUp();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Why does the exit button at the right not working? Please help. Im still learning how to use JavaScript.

Guest () - 10 years ago - Reply 0


how can i use this without clicking the button ? :D what i mean is i just need to call the function

i'm new to javascript :(

Alexis () - 10 years ago - Reply 0


Hmmm, I would suggest you look into plugins like http://wavded.github.io/hum... for that!

Also I have a chapter of my book on that: http://maxoffsky.com/frontend/

maxsurguy () - 10 years ago - Reply 0


Thankyou .. love this link you shared :D

Alexis () - 10 years ago - Reply 0


I like this, thank you man

Ryan Wu () - 10 years ago - Reply 0


Good snippet man ;)

Miguel Machado () - 10 years ago - Reply 0