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

Question

The same question is asked here. but it doesn't state the source, and the solution given is not directly applicable in my case afaik. I might get modded down for this, but I am asking anyway. My Entire Code:

<html><head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/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(document).ready(function() {
        jQuery("#dialog").dialog({
          bgiframe: true, autoOpen: false, height: 100, modal: true
        });
      });
    </script>
    <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a>
</body></html>

All script files are third party hosted, and I would want to keep it that way.

How do I get "click anywhere (outside the box)to close the modal box" functionality?

Thomas · Accepted Answer · 2010-09-29T17:45:38.757

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
  <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>

Thanks for the answer +1. but the code does not work. And I am a jquery neonate. — abel, Sep 29 '10 at 17:10
You're right, the first version was a bit rushed. The new one does work as you described. ;) — Thomas, Sep 29 '10 at 17:37
i like SO for this: quick straight answers. sister sites suffer from lack of traffic though. — abel, Sep 29 '10 at 17:41

score 3 · Answer 2 · answered Sep 21 '11 at 15:32

I know this has already has an accepted answer, but maybe this will help someone. It seems to me that it would be more efficient to bind a click onto the overlay div when the modal is opened. There is no need to unbind because jQueryUI destroys the overlay div on close.

jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 100,
        modal: true,
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    });
});

This is an old thread, but it should be noted that this approach only works if the dialog is using the modal:true setting. That setting adds the overlay which is needed in this solution. However, if you are using that setting, this answer is better/cleaner than the accepted answer above. — cjewby, Mar 12 '14 at 17:50

score 1 · Answer 3 · answered Sep 29 '10 at 17:24

1

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")
   }
});

answered Sep 29 '10 at 17:24

Shikiryu

10,180
8
49
75

1

This would close the dialog, if the user clicks anywhere (including inside the dialog element). – Thomas Sep 29 '10 at 17:39

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

3 Answers3