A common use-case is data validation. Specifically, when logging in or signing up. If the user enters an invalid email address, or wrong login credentials, we need to let them know. The built in browser alert() is clunky and unsophisticated. Plugins are bloated and over-engineered. I wrote some basic HTML, CSS, and JavaScript that gets the job done and looks great.<\/p>\n
My code provides two versions of the alert. The first is a basic sticky bar that fades in and out at the top of the page.<\/p>\n
![\"example](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2020\/10\/ui-alert.gif\")
<\/p>\n
The other flashes in the middle of the screen. I call it “in-your-face” alerts and reserve them for positive success messages.<\/p>\n
![\"example](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2020\/10\/in-your-face-alert.gif\")
<\/p>\n
The CSS adds styles for both versions. Both utilize ‘position: fixed’ to stay in a set location on the page. The “in-your-face” example uses a pulse animation to achieve its effect.<\/p>\n
<!-- UI-notifications.css -->\n<style>\nbody{\n margin: 0px;\n}\n.status-message{\n display: none;\n color: white;\n text-align: center;\n font-size: 16px;\n padding: 8px;\n border-top: 1px solid white;\n border-bottom: 1px solid white;\n position: fixed;\n width: 100%;\n top: 0px;\n padding: 28px 8px;\n background-color: #b12650;\n z-index: 1000;\n}\n.status-message-inner{\n margin: 0px;\n}\n\n.status-message-close{\n cursor: pointer;\n position: fixed;\n right: 10px;\n}\n.in-your-face{\n display: none;\n position: fixed;\n top: 45%;\n width: 100%;\n text-align: center;\n font-size: 48px;\n color: white;\n z-index: 2;\n}\n.in-your-face-inner{\n background: #005b96;\n width: 80%;\n margin: 0 auto;\n opacity: .85;\n padding: 10px;\n}\n@keyframes pulse{\n 50% {transform: scale(1.2);}\n\n}\n.pulse{\n animation: pulse 0.5s ease-in infinite;\n}\n<\/style>\n<!-- end UI-notifications.css -->\n<\/pre>\nThe javascript relies on jQuery as a dependency. It is written as a class, with a constructor and two methods. Each method takes message text as a parameter.<\/p>\n
class UINotifications {\n\tconstructor() {\n\t\twindow.jQuery || document.write('<script src=\"js\/vendor\/jquery-1.11.2.min.js\"><\\\/script>');\n\t\tvar statusMessageHtml = '<div class=\"status-message\"><p class=\"status-message-inner\"><span class=\"status-message-text\">Welcome to My App<\/span><span class=\"status-message-close\">X<\/span><\/p><\/div>';\n\t\tvar inYourFaceHtml = '<div class=\"in-your-face pulse\"><p class=\"in-your-face-inner\"><span class=\"in-your-face-text\">Great Job!<\/span><\/p><\/div>';\n\n\t\t$(document).on(\"click\", \".status-message-close\", function(){\n\t\t\t$(\".status-message\").fadeOut();\n\t\t});\n\n\t\tthis.statusMessage = $(\"<div\/>\").html(statusMessageHtml);\n\t\tthis.inYourFace = $(\"<div\/>\").html(inYourFaceHtml);\n\n\t\t$('body').prepend(this.inYourFace);\n\t\t$('body').prepend(this.statusMessage);\n\n\t}\n\n \tshowStatusMessage(message){\n \t\tvar notifications = this;\n\t \tvar message = message || \"Default Message\"\n\t \tvar statusMessageTimeout;\n\n\t\tif(notifications.statusMessage.find(\".status-message\").is(':visible')){\n\t clearTimeout(statusMessageTimeout);\n\t }\n\n\t\tnotifications.statusMessage.find(\".status-message .status-message-text\").html(message);\n\t\tnotifications.statusMessage.find(\".status-message\").fadeIn();\n\n\t statusMessageTimeout = setTimeout(function(){\n\t notifications.statusMessage.find(\".status-message\").fadeOut();\n\t }, 5000)\n\n\t}\n\tshowInYourFace(message, callback){\n\t\tvar notifications = this;\n\t\tvar inYourFaceTimeout;\n\t\tvar inYourFaceRandoms = [\"Good work!\", \"Hard work!\", \"Nice job!\", \"Hustle!\"]\n\n\t\tvar message = message || inYourFaceRandoms[Math.floor(Math.random()*inYourFaceRandoms.length)];;\n\t\tvar callback = callback || function(){};\n\n\t\tif(notifications.inYourFace.find(\".in-your-face\").is(':visible')){\n\t clearTimeout(inYourFaceTimeout);\n\t }\n\n\t\tnotifications.inYourFace.find(\".in-your-face .in-your-face-text\").html(message);\n\t\tnotifications.inYourFace.find(\".in-your-face\").show();\n\n\t inYourFaceTimeout = setTimeout(function(){\n\t notifications.inYourFace.find(\".in-your-face\").fadeOut(function(){\n\t \tcallback();\n\t });\n\n\t }, 1000)\n\t}\n}\n<\/pre>\nThis is a simple and lightweight solution to showing web app visitors informative alerts without using a plugin. Please, checkout the code and use it in your next project.<\/p>\n