on touch anywhere hide modal / tooltip / lightbox on mobile safari

Question

I'm building a page specifically for touch devices. There are menu items on the page itself, when you touch the menu, a DIV shows. However, I like to hide the DIV once the users taps any area outside of the DIV.

I know on desktop, you can have hover effect on menu, and shows a DIV, and that mimics the effect I want on mobile where you touch anywhere, the menu hides.

But How can I archive this specifically using touch gestures and not hover?

Heres a sample code so far: http://jsfiddle.net/calebo/E5vvm/

Answer 1

One way of doing it is to bind the body "click" event and as soon as it is clicked, hide the "star" div and unbind the body "click" event, it is dirty, but it is working...

$(document).ready(function() {
  $('.widget-stars').bind('click', function() {
    event.preventDefault();
    $('#star').fadeIn(function() {
      $( "#star" ).parents( "body" ).bind( "click", function() {
        $( "#star" ).fadeOut();
        $( this ).unbind( "click" );
      });
    });
  });
});