[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Closing a modal dialog by clicking outside the dialog

Posted on 2011-10-25
Medium Priority
Last Modified: 2012-06-21
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.
Question by:dolythgoe
  • 2
  • 2
LVL 34

Accepted Solution

Big Monty earned 2000 total points
ID: 37026693
try this:

$('.ui-widget-overlay').live('click', function() {    
      $('#your-dialog-id').dialog( "close" );

Author Comment

ID: 37029986
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!
LVL 34

Expert Comment

by:Big Monty
ID: 37033875
i think you're going to have to because it needs the ID of the dialog box

Author Comment

ID: 37036638
No worries, only one dialog can ever be open at one time so I'll send a message to close them all within this.

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question