CODEWITHSUNDEEP
jquerymodal-dialog
abel
abel

Reputation: 2383

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

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?

Upvotes: 2

Views: 27920

Answers (3)

ErikPhipps
ErikPhipps

Reputation: 155

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

Upvotes: 3

Thomas
Thomas

Reputation: 2162

<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>

Upvotes: 6

Shikiryu
Shikiryu

Reputation: 10219

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

Upvotes: 1

Related Questions