Introduction

Sometimes, when working with JavaScript, we need to write a confirm dialog or message box to display some informative data. We can either use JavaScript alert function or confirm function for such operations. But in order to make a nice UI, we can resort to JQuery UI dialog, which gives a nice chrome window. But settings that up is not a one liner task. In this article, I will present a small plugin which will help us display some basic dialog just to get the job done without too much code.

Background

JQuery UI library is getting more and more popular for doing web 2.0 style user interface. The library provides a rich set of widgets and the Dialog component is one of them. But to display a dialog, one would need to setup some div and the content of the dialog. You can then call the dialog function display with a lot of optional options for customization.

Using the Code

The plugin is very simple and small, download the code block and make a reference to the scripts right after you have referenced the jquery lib and UI lib. Caution, without the UI lib, the plugin won't work.

Behind the Scenes

For those of you who want to understand how the plugin works, here is a little detail. To display the jquery UI dialog, you need a div section to be declared in your page along with the dialog contents. Now every time on every page if we need to do that, it becomes tedious. So what the plugin does is to inject a hidden div at the end of BODY to be used with the dialog. It creates the div the first time the function is called. Next time, it will reuse the div.