Alert Message Boxes

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="title">
    <h3>Alert Messages with FontAwesome <i class="fa fa-code"></i></h3>
</div>
<div class="alertMsg default">
    <div class="msgIcon pull-left">
        <i class="fa fa-bullhorn"></i>
    </div>
    Lorem ipsum dolor sit amet, reflexionis.
    <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
</div>

<div class="alertMsg primary">
    <div class="msgIcon pull-left">
        <i class="fa fa-cogs"></i>
    </div>
    Quaestiones proponitur caelum pariter commendare Apollonius ut a patriam sum.
    <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
</div>

<div class="alertMsg info">
    <div class="msgIcon pull-left">
        <i class="fa fa-info-circle"></i>
    </div>
    Quaere allocutus ait est in rei sensibilium.
    <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
</div>

<div class="alertMsg success">
    <div class="msgIcon pull-left">
        <i class="fa fa-check-square-o"></i>
    </div>
    Interrogo nata genere in fuerat construeret in.
    <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
</div>

<div class="alertMsg warning">
    <div class="msgIcon pull-left">
        <i class="fa fa-warning"></i>
    </div>
    Apollonium contigit cum obiectum aliquip ipsa codicellos in fuerat est se est.
    <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
</div>

<div class="alertMsg danger">
    <div class="msgIcon pull-left">
        <i class="fa fa-times"></i>
    </div>
    Solodorum ait mea Christianis aedificatur ergo accipiet.
    <a class="msgClose" title="Close" href="#"><i class="fa fa-times"></i></a>
</div>

<div class="alertMsg...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

/* ==========================================================================
   Demo Styles
   ========================================================================== */
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: #494949;
    margin: 2% 5%;
}
.title h1, .title h2, .title h3, .title h4 {
	margin: 5px;
}
.title {
    position: relative;
    display: block;
    padding-bottom: 0;
    border-bottom: 3px double #dcdcdc;
    margin-bottom: 30px;
}
	.title::before {
		width: 25%;
		height: 3px;
		background: #53bdff;
		position: absolute;
		bottom: -3px;
		content:'';
	}

/* ==========================================================================
   Alert Message Boxes
   ========================================================================== */
.alertMsg {
    padding: 10px 30px 10px 60px;
    position: relative;
	font-size: 16px;
	line-height: 30px;
	margin: 10px 0;
}
    .alertMsg a {
        display: block;
        position: absolute;
        top: 2px;
        right: 10px;
        color: #fff;
        text-decoration: none;
        font-size: 14pt;
        opacity: 0.4;
    }
		.alertMsg a:hover { opacity: 0.8; }

.alertMsg .msgIcon {
    font-size: 25px !important;
    color: #ffffff;
    position: absolute;
    top: 9px;
    left: 15px;
}

.alertMsg.default {
	border-left: 5px solid #dcdcdc;
	border-color: #cacaca;
	background-image: linear-gradient(#fafafa, #f0f0f0);
	color: #202b33;
}
	.alertMsg.default .msgIcon { color: #999999; }
	.alertMsg.default a { color: #202b33; }

.alertMsg.primary {
	border-left: 4px solid #2e79b9;
	border-color: #2a6496;
	background-image: linear-gradient(#3b8dbd, #357faa);
	color: #ffffff;
}
.alertMsg.info {
	border-left: 4px solid #31a3c4;
	border-color: #28a1c5;
	background-image: linear-gradient(#5bc0de, #46b8da);
	color: #ffffff;
}
.alertMsg.success...

JavaScript

/**
 * See the PHP version at: http://snippetrepo.com/u2908z
 **/

jQuery(document).ready(function($) {
	
	/** ******************************
	* Alert Message Boxes
	****************************** **/
	$('.msgClose').click(function(e){
		e.preventDefault();
		$(this).closest('.alertMsg').fadeOut("slow", function() {
			$(this).addClass('hidden');
		});
	});

});