January 14th 2009

More jQuery Alert Dialogs Demo

A couple of weeks ago I wrote about Cory S.N. LaViska’s new jQuery Alert Dialogs Plugin. Since then I have used it quite a bit and have been really happy with its ease of use and simplicity. At the end of the my first post about the plugin I said I would try and show you a way to setup an alert from the server side so that it shows up once the web page loads.

So when might you do this? You might want an alert on page load to let the user know that a task such as a delete was successful or probably more importantly and less intrusive would be to only let the user know something went wrong.

The method I came up with to popup the dialog on page load involves a single hidden field. All you have to do is pass the type of alert, message and title you want through the hidden field and the jQuery/JavaScript will take this data on page load and create the desired alert. Remember, you will need my version of the plugin (in the download) to be able to choose the different type of dialogs (info, success, warning, error). Also, the css and images for the dialogs originally came from Janko’s great post CSS Message Boxes for different message types.

Live Demo | Download (HTML, CSS, JavaScript)

Screenshot of End Product:

Success Dialog Image

jQuery:

Please be sure to checkout the live demo and download.