Unobtrusive alert messaging
alert.js changes the default behaviour of JavaScript alerts so the site is still usable when shown and so they can be styled to fit the theme of the site.
Alert is library agnostic, and tested in IE7+, Chrome, Firefox, Opera, and Safari as well as iOS and Android.
Live demo for theme-1 and theme-2.
There are two example themes are in the css folder. The generated html is:
<div class="alert-message active"><p>message</p><button>Close</button></div>
The active class is used to trigger the CSS animation. Both classes can be changed from the containerClassName
and activeClassName
variables. The button text is set in closeText
.