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

Related Post

One Response to “jQuery – Modal Dialog”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail