Strong alert messages are needed for many interfaces.
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.
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.
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.
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
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.
That’s the beauty of using a framework: you save time and simplify the whole coding process.
- 12 Free Modal Window Libraries & Plugins For Your Site
- 9 Custom Open Source File Upload Field Snippets
- 8 Unique Password Field & Form Utility CSS & JS Snippets
- 8 Ways to Make the Search Field Sexy with CSS