на ощупь в любом месте скрыть модальные / всплывающие подсказки / лайтбокс на мобильном сафари

Question

Я создаю страницу специально для сенсорных устройств. На самой странице есть пункты меню, при нажатии на которые отображается DIV. Однако мне нравится скрывать DIV, когда пользователи касаются любой области за пределами DIV.

Я знаю на рабочем столе, что вы можете иметь эффект зависания в меню и отображать DIV, и это подражает желаемому эффекту на мобильном телефоне, где вы касаетесь где-либо, меню скрывается.

Но как я могу заархивировать это, используя сенсорные жесты, а не зависание?

Вот пример кода: http://jsfiddle.net/calebo/E5vvm/

Answer 1

Один из способов сделать это - привязать событие "click" к телу и, как только он будет нажат, скрыть div "star" и отменить привязку события "click" к телу, оно грязное, но оно работает ...

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