I've added the Overlay effect of jQuery Tools to my site, using the "Minimum Setup". Unfortunately when the user wants to close it, he must target this tiny circle on the upper right. Usability suffers this way. It would be far better if the user could simply click anywhere to close it.

Can I modify or add some code so it would close the overlay no matter where to user clicks? Or maybe when he clicks outside of the overlay? I couldn't find any notes on that in the docs.

I've added the Overlay effect of jQuery Tools to my site, using the "Minimum Setup". Unfortunately when the user wants to close it, he must target this tiny circle on the upper right. Usability suffers this way. It would be far better if the user could simply click anywhere to close it.

Can I modify or add some code so it would close the overlay no matter where to user clicks? Or maybe when he clicks outside of the overlay? I couldn't find any notes on that in the docs.

• javascript
• jquery
• jquery-tools

4 Answers 4

Or maybe when he clicks outside of the overlay?
Check the docs ('Configuration' part):

closeOnClick (default: true)
By default, overlays are closed when the mouse is clicked outside the overlay area. Setting this property to false suppresses this behaviour which is suitable for modal dialogs.

I.e., this functionality is already enabled by default. If it's not working, you might want to show us your overlay configuration.

@NikitaRybak The closeOnClick only works when you're using a expose/mask. I've modified the overlay code to work without a expose/mask..

Tidy the minified javascript.. locate this in the minified code:

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

and insert this to the function instead

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

Now if you're using the apple effect, find this in the apple effect code:

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

and insert class="apple" so it bees:

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

Hope this helps if anyone needs it..

Try (quick and dirty):

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

During my experiments I found out that even official jQuery Tools standalone demo doesn't close overlay correctly. For example when I click under the overlayed image it closes but when I click on the right or left side outside of the overlay it doesn't close.

So, in my case I used next solution to close overlay on click anywhere on the document:

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

May be it's dirty too but it works for me.