, , , , , , , ,

Javascript alert plays a vital role in UX development that’s undeniable fact. But this Javascript alert() function is disgusting on website that’s rich with design. A simple alert() function looks like this on a browser,


Javascript alert() function is of three types,

  1. Simple
  2. Confirm
  3. Prompt

This Javascript function is generally used as displaying alert messages to the user, but what if it doesn’t suit the website design?

As a UX developer I wasn’t happy with the Javascript alert() function being used as primary notification method to the use. But it is quite handy during the application development phase. Hence I was forced to write a jQuery plug-in that would serve the purpose of the Javascript alert() function. My plug-in is not a replacement for the alert() function, but it could do what the alert() function does and more over the popup design could be changed by CSS. Simple!


I named my plug-in jPopOut, take a look at the demo here.

jPopOut: Requirements

  1. jQuery: Of course, that’s the soul of the plug-in.
  2. FontAwesome: Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Have the full details on Font Awesome here.

jPopOut: Downloads
I have added a repository for jPopOut in Github, you are invited to connect and work together with me to improve the plug-in even better. You are also free to download the source code, edit it and free to use it in any of your projects.

I also request you to stay tuned with the Github repository for jPopOut because this plug-in jPopOut is not only about Javascript alert() function and more features are yet to come.

jPopOut: Methods and Callbacks
title: The title to be displayed on the alert header, if no title specified or if its empty, then the default text will be set as “your_window_location_hostname says:” (e.g. localhost:8080 says:)
messageType: What type of message are you displaying in the alert box, depending on this corresponding icons will be set on the alert header and body. Following are the message types available now, error, warning, success and prompt.
message: The message that need to be displayed on the alert box. Expects to be type of string.
okBtnText: You have the option to specify you custom name on the ‘OK’ button, by default the button name would be OK, but you could set is as per your requirements like ‘Yes’, Done, Confirm etc.
btnOkClick: You could specify your custom function, to be executed when the OK button is being clicked.
cancelBtnText: The text that you need to specify on the Cancel button as per your requirement.
btnCancelClick: Function to be executed when the user clicks on the cancel button.

I would appreciate your feedback and suggestions or even report bugs if found on this plugin because this is my first plug-in out for UX developers like you. Hope you would use this in your projects. Happy coding! 🙂