Home » jQuery » jQuery – Modal Dialog

jQuery – Modal Dialog

87Tr 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 post in jQuery

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery, bgiframe and IE6 z-order hacksjQuery, bgiframe and IE6 z-order hacks Well, it probably looks like an odd title.  But let's face it: we still have to support IE6 for some of our clients no matter how much we don't like it or it shouldn't be.  And one of the […]
  • 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 […]
  • jQuery – DialogjQuery – Dialog 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 […]
  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]
  • jQuery ProgressbarjQuery Progressbar Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback