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

  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some great va...
  • Getting started with jQuery and ASP.NETGetting started with jQuery and ASP.NET As promised, I am starting a series on jQuery.  Today our goal is to get a project setup in Visual Studio that uses jQuery.  We won't be explaining much in the way of syntax, but we will get our f...
  • jQuery TabsjQuery Tabs While the TabControl provided by Microsoft in the AJAX toolkit is probably a bit easier to use, the Tabs in jQuery are not much harder to implement and give us a bit more flexibility. Here are th...
  • jQuery – Modal DialogjQuery – Modal Dialog Last week I introduced the jQuery Dialog plugin, which allows us to put various dialogs on the screen. I only gave out the basics of this flexible widget to keep things simple.  Today, I wan...
  • jQuery – Sliders (scrollbars to the rest of us)jQuery – Sliders (scrollbars to the rest of us) Scrollbars are a fundamental GUI widget that exist on every operating system.  With the browser continually morphing into it's own operating system it isn't surprising that there are several ...
  • Pingback: Dew Drop - June 3, 2009 | Alvin Ashcraft's Morning Dew

  • Wallison

    Here not work…Have any file sample?

  • Dave

    This examples assumes you’ve read my other post.

    You are probably missing something minor. But, “not work” is such a broad description of the problem, I can’t possibly begin to help you.

  • Wallison

    Sorry my english is bad. I will read the other post.