Menu click event not working on jquery overlay windows

Question

So, I have a menu on the side, which is always visible, and I have absolutely positioned overlay windows on the other side of the page.

The code I came up with works fine, except that

1. when I click on the link in the menu to open another overlay window, the previous overlay is not closed, therefore the clicked overlay is not shown (unless I click somewhere else and close it) - I know I should bind a close event for the click too, I just don't know how..

2. it's too long, but I don't know how to simplify it..

3. I would also like to make it automatic, so that I can include as many pages (li elements) as I want to without having to add the id's of those overlays into the jquery code.

The html looks like this:

<div class="overlay" id="aoverlay"></div>
<div class="overlay" id="boverlay"></div>
<div class="overlay" id="coverlay"></div>

and the corresponding menu links are:

<ul class="nav">
   <li id="a"><a href="#">Overlay-window-1</a></li>
   <li id="b"><a href="#">Overlay-window-2</a></li>
   <li id="c"><a href="#">Overlay-window-3</a></li>
</ul>

The jquery code is:

$(document).ready(function(){

$(".overlay").css("height", $(window).height());

$("#a").click(function(){
    $("#aoverlay").fadeIn();
    $("body").css('overflow', 'hidden');
    $(".overlay").css('top', $(window).scrollTop());
    return false;
});

$("#b").click(function(){
    $("#boverlay").fadeIn();
    $("body").css('overflow', 'hidden');
    $(".overlay").css('top', $(window).scrollTop());
    return false;
});

$("#c").click(function(){
    $("#coverlay").fadeIn();
    $("body").css('overflow', 'hidden');
    $(".overlay").css('top', $(window).scrollTop());
    return false;
});

$(document).click(function(event) { 
    if($(event.target).closest('.logo, .nav, .reference').length == 0 ) {
        $("#aoverlay, #boverlay, #coverlay,").fadeOut();
        $("body").css('overflow', 'visible');
        $(".overlay").css('top', '0');
        return false; 
    }        
})

});

$(window).bind("resize", function(){
    $(".overlay").css("height", $(window).height());
});

Thank you for any help! (and please bear in mind, i'm pretty new to jquery)

Answer 1

Here's my solution (not the simplest, but answers questions 1 and 3).

If you know a simpler solution, feel free to share :)

$(document).click(function (event) {

var overid = ('#' + event.target.id + 'overlay');
var jt = ('#' + $('.overlay.open').attr('id'));

if (($(event.target).parent('.nav li').length === 1) && ($(event.target).closest('#regular-link').length === 0)) {

    if ($(overid).hasClass('open')) {
        $(overid).removeClass('open');
        $(overid).delay(500).fadeOut();
        $("body").css('overflow', 'visible');
        $(".overlay").css('top', $(window).scrollTop());
        event.preventDefault();

    } else {

        if ($(overid).not('open') && (jt === '#undefined')) {
            $(overid).delay(500).fadeIn();
            $(overid).addClass('open');
            $("body").css('overflow', 'hidden');
            $(".overlay").css('top', $(window).scrollTop());
            event.preventDefault();

        } else {

            $(jt).removeClass('open');
            $(jt).fadeOut();
            $("body").css('overflow', 'visible');
            $(overid).delay(500).fadeIn();
            $(overid).addClass('open');
            $("body").css('overflow', 'hidden');
            $(".overlay").css('top', $(window).scrollTop());
            event.preventDefault();
        }
    }

} else {

    if (($(event.target).closest('.nav, .no-close').length === 0) && $(jt).hasClass('open')) {
        $(jt).removeClass('open');
        $(jt).fadeOut();
        $("body").css('overflow', 'visible');
        $('.overlay').css('top', '0');
    }
}
});

I also created a JSFiddle here as well.

This script takes care of the overflow (scrollbar) of the page, and regular links in the nav menu too.