10 Free CSS & JS Notification Alert Code Snippets

Strong alert messages are needed for many interfaces.

In the past these messages were done using JavaScript alerts that were just annoying. But nowadays we can build some pretty awesome stuff using custom CSS & JS code.

I’ve curated my pick of 10 notification messages, dialog boxes, alert windows, whatever you want to call them. Either way, they’re free and they offer plenty of inspiration for UI/UX design ideas.

1. Colorful Messages

One of my favorite examples in this list is this pen full of colorful alert dialogs.

These windows slide down into view on top of the page and come with an array of color choices. These can be used for errors, warnings, success messages, or just basic informational content.

Best of all the alerts are easy to customize within this pen so you can make some edits, demo your changes live, then copy/paste the code right into your page.

2. Using Alertify.js

The free Alertify.js framework runs on vanilla JS and lets you design custom notification messages.

And this pen by Alex Pivtorak takes Alertify to a new level of polish that you can use with any page. Click either the “error” or “success” buttons and check the lower-right corner.

This is a common way of handling alerts because they’re unobtrusive yet they still get the message across.

3. Timed Notifications

Have a look at these timed notifications for a much simpler way to handle your alert boxes.

These don’t have any special colors or styles. They just drop into the page from above with a darkened opacity and take over the screen.

You can design something very similar on your own without too much effort. But why reinvent the wheel?

4. Pure CSS Box

I’m always a big fan of pure CSS and I try to stick with that whenever possible.

If you take a peek at this CSS modal you’ll notice it looks fantastic. Naturally, it runs without any JavaScript, and the default design should match any layout.

Plus this doesn’t give any specific “feeling” so you can use it for warnings, success alerts, or just basic informational messages.

5. Responsive Alert Box

Nobody should build any modern website without using responsive techniques.

They’re a staple for all web designers, and every script you use should be responsive too.

Thankfully these alert boxes have that responsive design style and they look gorgeous.

You can test the persistent boxes or the non-persistent styles, all of which look the same, and some include a small “X” icon to close it manually.

Lots of variety here and plenty of room to restyle them to match your site.

6. CSS3 Animated Message

If you’re a fan of tooltips for notifications then you’ll really like this pen.

It uses a simple tooltip dialog to create the infobox effect. This, in turn, leads to a basic script that you can setup with only 35 lines of JavaScript.

The entire thing has a fallback for older versions of Internet Explorer so it’s a safe choice for all audiences.

7. Formrun.js Dialog

While this demo is not in English, it’s still a workable UI that you can copy/paste and restyle on your own.

Simply titled formrun.js this uses a pure CSS dialog modal to handle error messages when submitting a login form.

The best part is that you can apply this to pretty much any form like checkout pages or user settings pages.

8. Custom Alert

Here’s a fun little alert box created from scratch by developer Luca Moser.

It uses lots of CSS and a good bit of JavaScript to create the animation effect.

This is unique because the trigger element is an input button, which means you could tie this function into a form much like the previous snippet.

However this one runs on CSS+JS, so it requires a little more coding knowledge to dig in and customize.

9. Window Alert

With a basic onclick method we can trigger this alert window running primarily on JavaScript.

It’s got a real basic design and a few basic features. There is no close button, only an OK button to hide the window.

This leaves a lot of room for improvements in the UX if you want to expand the modal for your site.

But it’s also a reliable script that will run as-is for all major browsers.

10. Ionic Alert

If you’ve ever heard of the Ionic Framework then you know it can be a pain to learn.

But it’s also one of the more advanced JS frameworks for building web and native apps on web-based languages.

Have a look at this alert script running on the Ionic Framework.

It mimics the iOS-style interface design but features a truly unique animation style. Not to mention the code itself runs without any extra CSS and it requires just 15 lines of JavaScript.

That’s the beauty of using a framework: you save time and simplify the whole coding process.

The post 10 Free CSS & JS Notification Alert Code Snippets appeared first on Speckyboy Web Design Magazine.