Как закрыть jQuery Tools Overlay на клике, где бы вы ни находились?

Question

Я добавил Эффект оверлея jQuery Tools на свой сайт, используя «Минимальную настройку».К сожалению, когда пользователь хочет закрыть его, он должен нацелиться на этот крошечный круг в верхнем правом углу.Юзабилити страдает таким образом.Было бы намного лучше, если бы пользователь мог просто щелкнуть в любом месте, чтобы закрыть его.

Могу ли я изменить или добавить какой-либо код, чтобы он закрывал оверлей независимо от того, где пользователь нажимает?Или, может быть, когда он щелкает за пределами оверлея?Я не смог найти никаких записей по этому поводу в документации.

Answer 1

А может, когда он щелкает за пределами оверлея?
Проверьте документы (часть «Конфигурация»):

closeOnClick (по умолчанию: true)
По умолчанию наложения закрываются при щелчке мыши за пределами области наложения. Установка этого свойства в false подавляет это поведение, которое подходит для модальных диалогов.

Т.е. эта функция уже включена по умолчанию. Если это не работает, вы можете показать нам свою оверлейную конфигурацию.

Answer 2

@ NikitaRybak closeOnClick работает только при использовании экспозиции / маски.Я изменил код наложения, чтобы он работал без маски / экспозиции.

Приведите в порядок минимизированный JavaScript. Найдите это в минимизированном коде:

b.closeOnClick && a(document).bind("click." + n, function(l) {

и вставьте его в функцию.вместо этого

if (!a(l.target).hasClass('overlay') && !a(l.target).hasClass('apple') && !a(l.target).parents('.overlay', f).length && !a(l.target).parents('[rel="#' + a(f).attr('id') + '"]').length && !(a(l.target).attr('rel') == '#' + a(f).attr('id'))) { c.close(l); }

Теперь, если вы используете эффект яблока, найдите его в коде эффекта яблока:

b = h('<img src="' + b + '"/>');

и вставьте class = "apple", чтобы он стал:

b = h('<img class="apple" src="' + b + '"/>');

Надеюсь, это поможет, если это кому-нибудь понадобится ..

Answer 3

Во время моих экспериментов я обнаружил, что даже официальная демонстрационная версия jQuery Tools не закрывает оверлей правильно. Например, когда я щелкаю под наложенным изображением, оно закрывается, но когда я щелкаю справа или слева от наложения, оно не закрывается.

Итак, в моем случае я использовал следующее решение, чтобы закрыть оверлей при щелчке в любом месте документа:

<script type="text/javascript">
    function closeOverlay(){
        $('.overlay:visible .close').click();
    }
    document.addEventListener('click',closeOverlay,true);
</script>

Может быть, это тоже грязно, но у меня это работает.

Answer 4

Попробуйте (быстро и грязно):

$(document).click(function(){
    $('.simple_overlay:visible .close').click();
});