A clean, Win8-inspired corner popup for notifications in Bootstrap
Requires jQuery Requires the Bootstrap3 framework Requires CSS3 transitions compliant browser
- Drop
/js/notification-popups.js
into your project's JS folder - Either drop
/src/less/alerts.less
into your LESS folder before compilation, overwriting the original alerts.less - Or use the precompiled
/css/alerts.css
file as an override to the compiled BS css. - Optionally, drop
/src/less/alert-colors.less
into your LESS folder, and if so, update your bootstrap.less to import this file
In true Bootstrap fashion, you may use a data-trigger=popup
attribute on any button or link element.
Hit me to see a popup
You'll also need to add other data-* attributes in order to make it worth your while
<button class="btn btn-primary" data-trigger="popup" data-type="success" data-title="Headline: " data-text="You have 1 new inbox" data-time="5">Hit me</button>
Call the popup programmatically, as a jQuery extension.
$.alert({ ... options ... });
These options can be specified in the { ... options... } object, or can be prefixed with data-* and inserted as an attribute.
type A string, either 'info', 'success', 'warning' or 'danger'
title A short title for the popup, displayed in bold
text The text body for the popup, displayed after the title
time Number of seconds before the popup disappears
classNames Any other classnames that you would like to whack onto the popup container
- Sorry, at the moment the transition-in is a fade, and the transition-out is a slide; I hope to make this configurable in the future.
- LESS source is tightly coupled with BS3 mixins and variables, BS4 looks like it'll be a SASS-only framework, so...
- $.alert() may be a popular name in the jQuery namespace; use
$.alert.noConflict()
to revert this name