Событие с щелчком мыши не работает над окнами оверлей jquery.

Question

Итак, у меня есть меню сбоку, которое всегда видно, и у меня есть абсолютно оверлейные окна на другой стороне страницы.

Код я пришел с работы в порядке, за исключением того, что

1. при нажатии на ссылку в меню, чтобы открыть еще одно окно наложения, предыдущее наложение не закрыт, поэтому нажал оверлей не (если я не щелкнул в другом месте и не закрыл его) - я знаю, что мне нужно связать событие закрытия для щелчка, я просто не знаю, как это сделать.

2. это слишком длинный, но я не знаю, как чтобы упростить его.

3. Я бы Также хотелось бы сделать это автоматически, чтобы я мог включать столько страниц (элементов li), сколько хочу, не добавляя id этих оверлеев в код jquery.

HTML, выглядит следующим образом:

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

и соответствующие ссылки меню являются:

<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> 

код JQuery является:

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

Спасибо за любого Помогите! (и, пожалуйста, имейте в виду, я довольно новичок в jquery)

Answer 1

Вот мое решение (не самое простое, но отвечает на вопросы 1 и 3).

Если вы знаете более простое решение, не стесняйтесь поделиться :)

$(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'); 
    } 
} 
}); 

Я также создал JSFiddle здесь.

Этот скрипт заботится о переполнении (полосе прокрутки) страницы и регулярных ссылках в навигационном меню.