jQuery – Dialog

food-cof-019 Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of absolute positioned DIV, but even doing that, a lot of the work is in making the pop-up look like a dialog.

Now, with the dialog widget available in the jQuery UI library, our lives have become much easier.

Creating a basic dialog in jQuery doesn’t require a whole lot of work.  However, there are a few things you need to remember.  First, you are going to need to use the UI themes from the jQuery UI library.  Remember from previous posts that we make the UI themes part of our ASP.NET themes, so you’ll need to set the theme for your document.

The basic html for your code should look something like this:

<div id="dialog" title="Here is the dialog title">
Here is content for the dialog
</div>

The Title attribute will become the title of the dialog.

Our jQuery that turns this into a dialog looks like this:

$(function() {
    $("#dialog").dialog();
});

The dialog you end up with is resizable and NOT modal.  To make it modal requires that you deal with the parameters you can hand into the dialog method.

There are so many ways that you can configure a jQuery dialog that I’m going to save that information for a second post on the subject.

 

Other post in jQuery

Related Post

4 Responses to “jQuery – Dialog”