<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 </button> </div> <div class="col-md-9"> <!-- Success messages --> <div class="alert alert-success alert-autocloseable-success"> I'm an autocloseable success message. I will hide in 5 seconds. </div> <div class="alert alert-success alert-normal-success" hidden="hidden"> <button type="button" class="close">×</button> I'm a normal success message. To close use the appropriate button. </div> <!-- Warning messages --> <div class="alert alert-warning alert-autocloseable-warning"> I'm an autocloseable warning message. I will hide in 3 seconds. </div> <div class="alert alert-warning alert-normal-warning" hidden="hidden"> <button type="button" class="close">×</button> I'm a normal warning message. To close use the appropriate button. </div> <!-- Danger messages --> <div class="alert alert-danger alert-autocloseable-danger"> I'm an autocloseable danger message. I will hide in 5 seconds. </div> <div class="alert alert-danger alert-normal-danger" hidden="hidden"> <button type="button" class="close">×</button> I'm a normal danger message. To close use the appropriate button. </div> <!-- Info messages --> <div class="alert alert-info alert-autocloseable-info"> I'm an autocloseable info message. I will hide in 6 seconds. </div> <div class="alert alert-info alert-normal-info" hidden="hidden"> <button type="button" class="close">×</button> I'm a normal info message. To close use the appropriate button. </div> </div> </div> </div>

$(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(); $('.alert-autocloseable-danger').delay(5000).fadeOut( "slow", function() { // Animation complete. $('#autoclosable-btn-danger').prop("disabled", false); }); }); $('#normal-btn-danger').click(function() { $('.alert-normal-danger').show(); }); $('#autoclosable-btn-info').click(function() { $('#autoclosable-btn-info').prop("disabled", true); $('.alert-autocloseable-info').show(); $('.alert-autocloseable-info').delay(6000).fadeOut( "slow", function() { // Animation complete. $('#autoclosable-btn-info').prop("disabled", false); }); }); $('#normal-btn-info').click(function() { $('.alert-normal-info').show(); }); $(document).on('click', '.close', function () { $(this).parent().hide(); }); });