ansaurus

Question

JQuery: Click anywhere on body to close modal dialog for this code

Answer 1

+1 A:

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;&lt;/script&gt;
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" />
 </head>
 <body>
  <div id="dialog" title="Title Box">
   <p>Stuff here</p>
  </div>
  <script type="text/javascript">
   jQuery(
    function() {
     jQuery("#dialog")
      .dialog(
       {
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true
       }
      );
     jQuery('body')
      .bind(
       'click',
       function(e){
        if(
         jQuery('#dialog').dialog('isOpen')
         && !jQuery(e.target).is('.ui-dialog, a')
         && !jQuery(e.target).closest('.ui-dialog').length
        ){
         jQuery('#dialog').dialog('close');
        }
       }
      );
    }
   );
  </script>
  <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
 </body>
</html>

Thomas 2010-09-29 17:06:21

Thanks for the answer +1. but the code does not work. And I am a jquery neonate.

abel 2010-09-29 17:10:05

You're right, the first version was a bit rushed. The new one does work as you described. ;)

Thomas 2010-09-29 17:37:04

works now. thanks for the excellent code!

abel 2010-09-29 17:38:52

i like SO for this: quick straight answers. sister sites suffer from lack of traffic though.

abel 2010-09-29 17:41:02

Answer 2

+1 A:

Try this and tell me if it works (I don't have time to try right now)

$('body').click(function(){
   if( $('#dialog').dialog("isOpen") ) {
      $('#dialog').dialog("close")
   }
});

Chouchenos 2010-09-29 17:24:22

This would close the dialog, if the user clicks anywhere (including inside the dialog element).

Thomas 2010-09-29 17:39:51

ansaurus

tags:

views:

answers:

JQuery: Click anywhere on body to close modal dialog for this code

related questions