.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:

Skechers Women's D'Lites - Myst Light Weight SneakerWomen's Skechers, Athletic

Kenwood KFC-6982IE 6-Inch x 9-Inch 500-Watt Max Power 5-Way Speaker System5-way 6"x9" speakers (pair) * fiber-textured mica-injected polypropylene woofer * 4-ohm impedance * recommended power range: 2-90 watts RMS * frequency response: 28-30,000 Hz * sensitivity: 93 dB *

CR2025 Battery, Package of 5Cross Reference: CR2025, 5003LC, DL2025

If you're new here, you may want to subscribe to the mailing list to get notifications of new post and a virtual tour of past topics. Thanks for visiting!

Related Post

• jQuery, bgiframe and IE6 z-order hacks
• jQuery Dialog – With Validation Controls
• jQuery – Dialog
• jQuery 1.4 Released
• jQuery and ASP.NET UpdatePanel

Bookmark to:

Hide Sites

One Response to “jQuery – Modal Dialog”