"Button Autohide Messages"
Bootstrap 3.2.0 Snippet by hardikguj

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="container" style="height: 600px;">
<div class="row">
<h2>Click buttons to test alert messages</h2>
<br />
<div class="col-md-3">
<!-- Success buttons messages -->
<button id="autoclosable-btn-success" class="btn btn-primary btn-success btn-block">
Autocloseable message success
</button>
<button id="normal-btn-success" class="btn btn-primary btn-success btn-block">
Normal message success
</button>
<!-- Warning buttons messages -->
<button id="autoclosable-btn-warning" class="btn btn-primary btn-warning btn-block">
Autocloseable message warning
</button>
<button id="normal-btn-warning" class="btn btn-primary btn-warning btn-block">
Normal message warning
</button>
<!-- Danger buttons messages -->
<button id="autoclosable-btn-danger" class="btn btn-primary btn-danger btn-block">
Autocloseable message danger
</button>
<button id="normal-btn-danger" class="btn btn-primary btn-danger btn-block">
Normal message danger
</button>
<!-- Info buttons messages -->
<button id="autoclosable-btn-info" class="btn btn-primary btn-info btn-block">
Autocloseable message info
</button>
<button id="normal-btn-info" class="btn btn-primary btn-info btn-block">
Normal message info
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
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 () {
$('.alert-autocloseable-success').hide();
$('.alert-autocloseable-warning').hide();
$('.alert-autocloseable-danger').hide();
$('.alert-autocloseable-info').hide();
$('#autoclosable-btn-success').click(function() {
$('#autoclosable-btn-success').prop("disabled", true);
$('.alert-autocloseable-success').show();
$('.alert-autocloseable-success').delay(5000).fadeOut( "slow", function() {
// Animation complete.
$('#autoclosable-btn-success').prop("disabled", false);
});
});
$('#normal-btn-success').click(function() {
$('.alert-normal-success').show();
});
$('#autoclosable-btn-warning').click(function() {
$('#autoclosable-btn-warning').prop("disabled", true);
$('.alert-autocloseable-warning').show();
$('.alert-autocloseable-warning').delay(3000).fadeOut( "slow", function() {
// Animation complete.
$('#autoclosable-btn-warning').prop("disabled", false);
});
});
$('#normal-btn-warning').click(function() {
$('.alert-normal-warning').show();
});
$('#autoclosable-btn-danger').click(function() {
$('#autoclosable-btn-danger').prop("disabled", true);
$('.alert-autocloseable-danger').show();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: