Comments on: How to close a jQuery dialog box by clicking outside of it http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/ User interface designer Thu, 19 Jan 2012 20:49:00 +0000 hourly 1 http://wordpress.org/?v=3.1 By: Luis Martin http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-48 Luis Martin Thu, 19 Jan 2012 20:49:00 +0000 http://www.littled.net/new/?p=392#comment-48 This is good if you want to simulate a modal dialog box, but what if I want to keep everything else visible? I guess I could use a transparent overlay, but is there any better and more programmatic solution? Figure this case: There is a button which displays a drop-down dialog with several checkboxes, and I want to allow the user to close it if I click anywhere except for the drop-down dialog box. This is good if you want to simulate a modal dialog box, but what if I want to keep everything else visible? I guess I could use a transparent overlay, but is there any better and more programmatic solution? Figure this case: There is a button which displays a drop-down dialog with several checkboxes, and I want to allow the user to close it if I click anywhere except for the drop-down dialog box.

]]> By: Balaji http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-34 Balaji Thu, 09 Jun 2011 12:34:00 +0000 http://www.littled.net/new/?p=392#comment-34 This solution worked for me, thanks. This solution worked for me, thanks.

]]> By: Balaji http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-43 Balaji Thu, 09 Jun 2011 12:34:00 +0000 http://www.littled.net/new/?p=392#comment-43 This solution worked for me, thanks. This solution worked for me, thanks.

]]> By: Josh Matz http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-33 Josh Matz Mon, 14 Mar 2011 17:39:00 +0000 http://www.littled.net/new/?p=392#comment-33 Thanks, this worked for me after trying a few other methods (and debating about installing an outside plugin)! Thanks, this worked for me after trying a few other methods (and debating about installing an outside plugin)!

]]> By: Josh Matz http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-39 Josh Matz Mon, 14 Mar 2011 17:39:00 +0000 http://www.littled.net/new/?p=392#comment-39 Thanks, this worked for me after trying a few other methods (and debating about installing an outside plugin)! Thanks, this worked for me after trying a few other methods (and debating about installing an outside plugin)!

]]> By: Marty http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-32 Marty Wed, 06 Jan 2010 20:09:52 +0000 http://www.littled.net/new/?p=392#comment-32 I can't leave the html portion. I tried to send it to you on twitter, but don't know if it went since you don't follow me. Anyway, it is a link with the id of dialog. Thanks for the jquery; it saved me figuring it out. I can’t leave the html portion. I tried to send it to you on twitter, but don’t know if it went since you don’t follow me. Anyway, it is a link with the id of dialog.

Thanks for the jquery; it saved me figuring it out.

]]> By: David http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-31 David Wed, 06 Jan 2010 19:55:05 +0000 http://www.littled.net/new/?p=392#comment-31 Hi Marty, thanks for the example. I'll see if I can something up too when I have a chance. Hi Marty, thanks for the example. I’ll see if I can something up too when I have a chance.

]]> By: Marty http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-30 Marty Wed, 06 Jan 2010 19:49:51 +0000 http://www.littled.net/new/?p=392#comment-30 Perhaps this will work as an example: jQuery portion: <code> $(function(){ // Dialog $('#dialog').dialog({ autoOpen: false, width: 600, modal: true, //there is no overlay (.ui-widget-overlay) if modal is false or not set. buttons: { "Close": function() { $(this).dialog("close"); } } }); //closes the dialog window if the user clicks outside of the window. $(".ui-widget-overlay").live("click", function() { $("#dialog").dialog("close"); } ); // Link to open the dialog box $('#dialog_link').click(function(){ $('#dialog').dialog('open'); return false; }); }); </code> HTML portion: <code> <a href="#" rel="nofollow">Open Dialog</a> </code> Perhaps this will work as an example:

jQuery portion:

$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true, //there is no overlay (.ui-widget-overlay) if modal is false or not set.
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});

//closes the dialog window if the user clicks outside of the window.
$(".ui-widget-overlay").live("click", function() { $("#dialog").dialog("close"); } );

// Link to open the dialog box
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});

HTML portion:

Open Dialog

]]> By: Marty http://www.littled.net/2009/11/30/how-to-close-a-jquery-dialog-box-by-clicking-outside-of-it/#comment-29 Marty Wed, 06 Jan 2010 19:29:06 +0000 http://www.littled.net/new/?p=392#comment-29 If you could show an example with html and all, it would be awesome. If you could show an example with html and all, it would be awesome.

]]>