jquery popup cancel event
<p>I have a (visibility:hidden) div with a Drop Down menu and a jQuery datepicker on it.
This div is a popup that is displayed when the user clicks on an input field.</p>

<p>When the user clicks anywhere else on the page, the popup needs to dissappear. 
The code to hide the popup is like so:</p>

<pre><code>jQuery('.datepicker-popup').live("focusout", function() {
    var id = jQuery(this).attr('id'); 
    id = id.substring(17); // datepicker-popup-#  
    jQuery('#datepicker-popup-'+id).fadeTo(500, 0.0, function() {
        jQuery('#datepicker-popup-'+id).css('visibility', 'hidden');
    });
});
</code></pre>

<p>Using jQuery 1.4</p>

<p>Now the problem is that the popup fades when the user clicks on the drop down menu above the datepicker or on the drop down menus from the datepicker itself (month/year) e.g. the code is being executed when the user uses (some) elements within the div, this obviously needs to be prevented somehow.</p>

<p>How do I do this the right way?</p>

<p>edit:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="js/jquery-1.4.min.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){ 
    jQuery('.datePickerTriggerElement').click(function(){
      var picker = jQuery('.datepicker-popup');
      jQuery('&lt;div&gt;&lt;/div&gt;').css({
        height: body.height(), 
        width: body.width(), 
        position: 'absolute',
        'z-index': -1,
        top: picker.offset().top*-1, 
        left: picker.offset().left*-1
      }).click(function(){
         picker.trigger('focusout'); // or the body of your focusout callback
         jQuery(this).hide(); // or remove if you dont wan to reuse.
      }).prependTo(picker); 
      picker.css('visibility', 'visible');
    });
    jQuery('.datepicker-popup').live("focusout", function() {
      jQuery('.datepicker-popup').fadeTo(500, 0.0, function() {
        jQuery('.datepicker-popup').css('visibility', 'hidden');
        jQuery('.datepicker-popup').css('opacity', '1.0');
      });
    }); 
  });  
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt; 
  &lt;p&gt;
    &lt;input type=text class=datePickerTriggerElement /&gt;
    &lt;div id="datepicker-popup-0" class="datepicker-popup" style="visibility: hidden"&gt;
        Popup text
    &lt;/div&gt;
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The body.height() and body.width() appear to break the code, if you were to put in something like height: '500px', width: '500px' it works for that area!</p>

<p>using jQuery(window).height() it works somewhat, but right now I see that's a bit off. The window height is not fully calculated it seems, the monitor is 1024 high, though the script says 937 even if I use Google Chrome in full screen</p>

<p>edit: I'm using screen.height and screen.width instead, this always gives the maximum area :)</p>

<p>So i have this working now, but there is one flaw: When clicking on drop down menus in the popup the popup fades as well.
I tried using</p>

<pre><code>jQuery('select').click(function(event){
  event.stopPropagation();
});
</code></pre>

<p>But that doesn't work at all.</p>
