.NET Answers

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 want to expand on that a bit by showing off some of the other capabilities.

If you’ve been coding along, pull out the code from last week, because that’s where I’ll be starting from.

One of the things you’ll probably want to do when you create your dialog is to make it modal.  The dialog we put up last week still allowed the user to access the controls that were part of the main web page.  To prevent that from happening, you can pass a parameter into the .dialog() called “modal.”

Here’s the code you need.

$(function() {
    $("#dialog").dialog({ modal: true });
});

If you are only working with the newer browsers, this should be all you need.  But if you are still fighting with IE6, you’ll also be interested in using the bgiframe parameter

$(function() {
    $("#dialog").dialog({ modal: true,
    bgiframe: true });
});

which places an iframe immediately under the dialog so that certain form controls do not bleed through.

Of course, you don’t have to initialize the dialog when the page loads. You could trigger it from a click event of some other control on the page.  See the other posts listed below for other jQuery tutorials.

Other Related Items:

Change Comes Knocking - The Story of the North Carolina FundChange Comes Knocking is the tumultuous story of a bi-racial anti-poverty organization called the North Carolina Fund (NCF) that boldly confronted the... Read More >

Zhu Zhu Pets Hamster Pipsqueek - YellowPip Squeak is super sweet and smart Nurturing mode: hamster coos and purrs

Vince Camuto Women's Clarkson SandalThe majesty of Vince Camuto's Clarkson sandal lies in the contrast between its sumptuous suede upper and its bejeweled t-strap. Its covered block heel lends an air of toughness, so this shoe's perfect for an evening out but not too precious to glam up your favorite casualwear.

Related Post

• jQuery, bgiframe and IE6 z-order hacks
• jQuery Dialog – With Validation Controls
• jQuery – Dialog
• jQuery Cookbook
• jQuery 1.4 Released

Bookmark to:

Hide Sites

One Response to “jQuery – Modal Dialog”