How can I close a jQuery dialog, when I click outside the actual dialog frame?

Question

I initiate a jQuery modal window from a button click and would like it to close when I click somewhere outside the dialog. Does anyone know how to achieve that?

This is how the dialog is created:

var $dial2 = ""


    function openmenu(width, height, menuID){ if ($dial2 == "") {
        $dial2 = $('<div></div>')
                       .html('<iframe id="dial2" style="border: 0px; " src=/CustomControls/PageSubMenu.aspx?&menuID="' + menuID + '" width="100%" height="100%"></iframe>')
                       .dialog({
                           autoOpen: false,
                           modal: false,
                           height: height,
                           width: width,
                           title: 'Menu',
                           draggable: false,
                           resizable: false,
                           position: {
                               my: 'top',
                               at: 'left-207',
                               of: $('#btnMenu')
                           },
                           dialogClass: "testdia"
                       });
        $dial2.dialog('open');
    }
}

Just to let you know I have tried the options (2 x for non modal) that are displayed in posts on stackoverflow and they don't work which is why I am posting this. I guess it is something to do with the iframe etc. so it is a special case.

This could be useful to you: http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside — RobF, Jan 23 '14 at 09:43
possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Ryan, Jan 23 '14 at 09:44
This might hekp - http://stackoverflow.com/questions/8306547/jquery-ui-dialogs-how-to-close-dialog-when-click-outside — MusicLovingIndianGirl, Jan 23 '14 at 09:57
@Aishvarya Please see my last comments added below the code. — connersz, Jan 23 '14 at 10:07
If any of you thought my question was relevant or could be helpful to others looking to achieve similar functionality, would you mind upvoting it, many thanks. — connersz, Feb 06 '14 at 09:58

Hüseyin BABAL · Answer 1 · 2014-01-23T10:55:27.490

You can bind clickoutside close event to your dialog object

Edit: This didn't work because, you have position value of:$('#btnMenu'), but there is no such an element. I have added an element and you can have a look at here for working fiddle: http://jsfiddle.net/53v5E/

var $dial2 = ""
var closed = 0;

function openmenu(width, height, menuID) {
    if ($dial2 == "") {
        $dial2 = $('<div></div>')
            .html('<iframe id="dial2" style="border: 0px; " src="http://jsfiddle.net/echo/jsonp/" width="100%" height="100%"></iframe>')
            .dialog({
            autoOpen: false,
            modal: false,
            height: height,
            width: width,
            title: 'Menu',
            draggable: false,
            position: {
                my: 'top',
                at: 'left-207',
                of: $('#btnMenu')
            },
            resizable: false,
            open: function (e, ui) {
                closed = 0;
                $(document).bind('click', closeDialog);
            }
        });
        $dial2.dialog('open');
    }
}

function closeDialog() {
    if (closed == 0) {
        $dial2.dialog('close');
        closed = 1;
    }
}

openmenu("500", "500", "5")

There was an error on your code. `of: $('#btnMenu')` there is no such an element. I have corrected code and add working example. Could you please check? — Hüseyin BABAL, Jan 23 '14 at 10:56

score 0 · Answer 2 · answered Jan 23 '14 at 10:35

You can use document's click event for closing the dialog box. here i am binding a code for better understanding.

var $dial2 = ""

function openmenu(width, height, menuID){ if ($dial2 == "") {
   $dial2 = $('<div></div>')
             .html('<iframe id="dial2" style="border: 0px; " src=/CustomControls/PageSubMenu.aspx?&menuID="' + menuID + '" width="100%" height="100%"></iframe>')
             .dialog({
                autoOpen: false,
                modal: false,
                height: height,
                width: width,
                title: 'Menu',
                draggable: false,
                resizable: false,
                position: {
                   my: 'top',
                   at: 'left-207',
                   of: $('#btnMenu')
                },
                dialogClass: "testdia"
             });
             $dial2.bind('click',function(e){
                e.stopPropagation();
             });
             $dial2.dialog('open');

             $(document).bind('click',function(){
                $dial2.dialog('close');
             });
          }
      }

When I add the click event to the document it prevents the dialog opening in the first instance. — connersz, Jan 23 '14 at 12:30
when you click to button use e.stopPropagation in button click event, so it prevents the click event of document on button click. — Arjun, Jan 23 '14 at 13:08

How can I close a jQuery dialog, when I click outside the actual dialog frame?

2 Answers2