Message Box This message box was generated using the jqWolfer jQuery plugin. It is designed to replace the default alert boxes with a custom look.

jqWolfer v0.5 -- jQuery message box alert plugin

Wolfer alert message box. A jQuery plugin.

The howling alert message box plugin. (Originally, the jq-alert plugin.)

This is the beta version of jqWolfer plugin that was described on Replacing the native JavaScript alert message box with a custom one styled using CSS tutorial page.

jqWolfer overwrites the default window.alert method and rebuilds the message box using custom CSS.

Test it yourself: Untested in IE. Initially I like to design my JavaScript code for Chrome in which it will always work 100% correctly as intended. It will somewhat work in Firefox and probably will not work in IE properly, mostly due to the non-standard CSS processor. Future versions will tweak IE code. This is done to save time for writing new tutorials and developing jQuery and JavaScript code/plugins/etc. The web developer community has been kind in helping me fix various bugs and apply HTML and CSS corrections to my code, and sometimes there is a web developer who sends their own code to correct an issue.

Developer's log
June 10, 2013Created the plugin base code, added css style, created images.
June 11, 2013Updated for IE, modified the jq-wolfer.css
June 11, 2013Changed container to position:fixed (from position:absolute)

Please feel welcome to send me an email at if you want toadd your own edits to this plugin or submit suggestions.

About jqWolfer

Modal alert boxes triggered by the window.alert method open a new operating system window with a message that often interrupts the program flow. jqWolfer intercepts the alert message and redefines the visual look of the message box by providing its own custom CSS style.

Thank You.

Here are some advantages of jqWolfer message box over the default:

How to install jqWolfer on your website

Download the following files:

To add the plugin to your page (you will also need jQuery added to your project): <head> <script src = 'jquery.js' type = 'text/javascript'></script> <script src = 'jq-wolfer.js' type = 'text/javascript'></script> <link rel = 'stylesheet' type = 'text/css' href = 'jq-wolfer.css' /> </head>

How to use jqWolfer alert message box

Once the files above are added, the alert message box is already overwritten. You are ready to start using it: <script type = "text/javascript"> alert("Your alert message <i>may include HTML.</i>", "Message Box Title"); </script>
However, it is best to wait until all DOM elements are loaded before you call the new alert method: <script type = "text/javascript"> $(document).ready() { alert("Your alert message <i>may include HTML.</i>", "Message Box Title"); } </script>

Note: This plug-in is not for everyone. Adding this plugin to your website will rewrite the default alert method which may be already being used in a manner proper to that web application. This plugin takes over the alert method and provides a slightly cleaner and easier to read alert message box for debugging JavaScript variables and various text output.

Recommended jQuery tutorial books:

Do you want to learn how to build your own jQuery plugins? These books have the info to help you get started. These are my tutorial e-books with an interractive table of contents which make it easy to find the subject of interest. It is packed with detailed explanations & diagrams.

understanding jquery pdf tutorial book

Understanding jQuery (196 pages) An easy to understand guide with thorough, yet simple explanations and visual diagrams -- It's designed to widen your knowledge of jQuery - the cross-browser framework that simplifies JavaScript programming.

Although it does cover advanced subjects such as function closures (not seen in any tutorial on in neither JavaScript nor jQuery category) the beginner programmer will get the most out of it.

jquery gems tutorial book

jQuery Gems (80 gems) Discover jQuery one bit of knowledge at a time. Each page contains 1 "gem" of information in tutorial-like format.

Thought you might be interested in this...
Get 2 and save $10

I do not publish my books with any major publishing companies. People get my books because they like my tutorials. I like to write tutorials and my books help me to continue doing that. Your support is much appreciated.

2013 Copyright. Tutorials