RESPONSIVE CSS FRAMEWORK

Alerts

The purpose of alert boxes is to notify the users about a simple message, success, failure, info, warning or question. These types of alerts are present in the CSS styles. There are four alert styles and each supports the six types of alert messages. You can choose from four types of hide effects: fade, slide, fade-slide, scale.
Alert type classes
<div class="[message, success, error, info, warning, question] alert style-1">
    Alert message <a href="#" class="close">x</a>
</div>

Skin style classes
<div class="warning alert [style-1, style-2, style-3, style-4]">
    Alert message <a href="#" class="close">x</a>
</div>

Style classes
<div class="warning alert style-3 [rounded, bordered]">
    Alert message <a href="#" class="close">x</a>
</div>

Hide effect classes
<div class="warning alert style-2">
    Alert message <a href="#" class="close [fade, slide, fade-slide, scale]">x</a>
</div>

Alerts style-1

Message alert boxx

Success alert boxx

Error alert boxx

Info alert boxx

Warning alert box x

Question alert boxx

Include for alert style-1

// Common CSS file for the alerts
<link rel="stylesheet" href="css/alerts/JFAlert.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/alerts/JFAlertStyle-1.css" />

// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->

// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->

Usage for alert style-1

<div class="message alert style-1 rounded bordered">
    Message alert box<a href="#" class="close fade">x</a>
</div>
<div class="success alert style-1 rounded bordered">
    Success alert box<a href="#" class="close slide">x</a>
</div>
<div class="error alert style-1 rounded bordered">
    Error alert box<a href="#" class="close fade-slide">x</a>
</div>
<div class="info alert style-1 rounded bordered">
    Info alert box<a href="#" class="close scale">x</a>
</div>
<div class="warning alert style-1 rounded bordered">
    Warning alert box<a href="#" class="close fade">x</a>
</div>
<div class="question alert style-1 rounded bordered">
    Question alert box<a href="#" class="close slide">x</a>
</div>
					
Top