Alert Boxes
Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.
Basic
You can create an alert box using minimal markup.
HTML
<div data-alert class="alert-box">
<!-- Your content goes here -->
<a href="#" class="close">×</a>
</div>Advanced
You can add more classes to your alert box to change its appearance.
HTML
<div data-alert class="alert-box success radius">
This is a success alert with a radius.
<a href="#" class="close">×</a>
</div>
<div data-alert class="alert-box warning round">
This is a warning alert that is rounded.
<a href="#" class="close">×</a>
</div>
<div data-alert class="alert-box info radius">
This is an info alert with a radius.
<a href="#" class="close">×</a>
</div>Customize With Sass
Alert boxes can be easily customized using our Sass variables.
SCSS
$include-html-alert-classes: $include-html-classes;
// We use this to control alert padding.
$alert-padding-top: rem-calc(11);
$alert-padding-default-float: $alert-padding-top;
$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
$alert-padding-bottom: $alert-padding-top + rem-calc(1);
// We use these to control text style.
$alert-font-weight: bold;
$alert-font-size: rem-calc(14);
$alert-font-color: #fff;
$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
// We use this for close hover effect.
$alert-function-factor: -14%;
// We use these to control border styles.
$alert-border-style: solid;
$alert-border-width: 1px;
$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
$alert-bottom-margin: rem-calc(20);
// We use these to style the close buttons
$alert-close-color: #333;
$alert-close-position: rem-calc(5);
$alert-close-font-size: rem-calc(22);
$alert-close-opacity: 0.3;
$alert-close-opacity-hover: 0.5;
$alert-close-padding: 5px 4px 4px;
// We use this to control border radius
$alert-radius: $global-radius;Semantic Markup With Sass
You can create your own alert boxes using our Sass mixins.
Basic
You can use the alert() mixin to create your own alert box, like so:
SCSS
.custom-alert-box {
@include alert();
}HTML
<div data-alert class="custom-alert-box">
<a href="#" class="close">×</a>
</div>Advanced
You can further customize your alert boxes using the provided options in the alert() mixin:
SCSS
.custom-alert-box {
@include alert(
// Adjust the background of the alert
$bg: #cccccc,
// Give a border to the alert box
$radius: true
);
}HTML
<div data-alert class="custom-alert-box">
<!-- Your content goes here -->
<a href="#" class="close">×</a>
</div>Configure With JavaScript
It's easy to configure alert boxes using our provided JavaScript. You can use with data-attributes or plain old JavaScript. Make sure jquery.js, foundation.js, and foundation.alert.js have been included on your page before continuing. For example add the following before the closing <body> tag:
HTML
<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<script src="js/foundation.alert.js"></script>Basic
Using data-attributes is the preferred method of making changes to our JavaScript.
HTML
<div data-alert data-options="animation_speed:500;" class="custom-alert-box">
...
</div>Advanced
You can adjust many settings. For example:
JS
$(document).foundation({
alert: {
animation_speed: 500,
animation: 'fadeOut'
}
});Binding to Events
The last thing you can do with alerts is listen for events and respond accordingly.
Basic
This example lets notifies us when users close an alert box.
JS
$(document).on('close.fndtn.alert-box', function(event) {
console.info('An alert box has been closed!');
});Advanced
We can respond to all the possible events.
JS
$(document).on('open.fndtn.alert-box', function(event) {
console.info('An alert box has been opened!');
});
$(document).on('close.fndtn.alert-box', function(event) {
console.info('An alert box has been closed!');
});Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/alert-boxes";