• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

Closing a modal dialog by clicking outside the dialog

Hi all,

I have a series of dialogs on my site - all of which are autoOpen: false

I'm looking to close them if the user clicks outside the dialog. I've tried the below:

		$(".ui-widget-overlay").click (function () {
			$(this).dialog( "close" );
		});

Open in new window


Without any success - someone mentioned in a forum about live() but I'm not sure what that means or how to use it. I'm guessing that because the dialog is not instantiated until an event is such that opens it, the code above won't work.

Using the div id in this code isn't very practical because there's a good few of them so tried it with 'this'.

Thanks for any help.
0
dolythgoe
Asked:
dolythgoe
  • 2
  • 2
1 Solution
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
try this:

$('.ui-widget-overlay').live('click', function() {    
      $('#your-dialog-id').dialog( "close" );
});
0
 
dolythgoeAuthor Commented:
Thanks for that - prob is I have many #you-dialog-id's - unless I specify this function for everyone which might be a bit clunky but if there's no other way I guess I'll have to!
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
i think you're going to have to because it needs the ID of the dialog box
0
 
dolythgoeAuthor Commented:
No worries, only one dialog can ever be open at one time so I'll send a message to close them all within this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now