随时随地触摸隐藏移动浏览器上的模式/工具提示/灯箱

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