How Do We Make It Such That When The User Clicks On Anywhere But The Popup Box, The Popup Box Will Close.

I was trying to learn how to build the date picker like the one at http://jqueryui.com/demos/datepicker/ Basically i make the 'date popup' display=none at the onblur event of the t

Solution 1:

The jQuery UI datepicker is a pretty advanced widget. The developers for jQuery UI have an event handler called _checkExternalClick that is applied to the mousedown event. This event handler checks for several things (is the datepicker opened, is the id of the element clicked == to the id of the datepicker, does the datepicker have a markerclass (adds to element className to indicate datepicker attachment), does the datepicker have a triggerclass (e.g. icon trigger), etc.). If everything passes, the _hideDatepicker function is called.

Here is a simplified example of what the jQuery UI datepicker is doing: http://jsfiddle.net/GSzYF/. You probably won't need to check for everything the jQuery UI datepicker checks for, because the widget you write will most likely not need to be as customizable as a distributed framework.

Solution 2:

The simple option is to create a click-capturing, transparent div with a z-index that is less than your popup. Set the div style to position:fixed;width:100%;height:100%;left:0;top:0 so that it encompasses the whole visible screen. You will probably want to append this to the body tag's content, so that you can make sure it's not contained within something else with fixed or absolute position.

Then, all you need to do is tie your close handler to this div, and when it's clicked you can tear down the popup as well as the div itself.

If you want to get fancy, you can make that div very slightly opaque, which helps indicate to the user that their focus should be on the popup.

Your other option is to track the mousedown or click event on the window object, compare the mouse coordinates to the bounding box of the popup, and handle outside clicks by closing the popup and preventing the default event action. Frankly this is a lot more complicated and prone to bugs, so shoot for the first technique if it suits your needs.