Scomparsa div con click su pagina

[Kronim]

Ciao a tutti,
sono nuovo del forum e avrei un problema con uno script.

Ho un div che esce quando premo su un link, vorrei che questo stesso div scomparisse quando clicko in un qualsiasi punto della pagina che non sia la sua area.

Questo è lo script:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('loginbtn').addEventListener('click', function () {
        document.getElementById('logindiv').style.transition = 'all 1s';
        document.getElementById('logindiv').style.top = '2.5rem';
        $("#logindiv").addClass('espanso');
    })
    
    document.addEventListener('click', function () {
        if ($("#logindiv").hasClass('espanso')) {
            document.getElementById('logindiv').style.top = '-300%';
            $("#logindiv").removeClass('espanso');
        }
    })
});

Però credo che i due EventListener avvengano insieme. Consigli?

[sgogghy]

Devi creare una div "overlay" tra il body e la div espansa (utlizzando gli z-index).
Al click dell'overlay, fai chiudere la div .

[Kronim]

Ah, interessante. Dunque, ho aggiunto il div "#overlay" prima dei div in comparsa e gli ho dato questo style:

#overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

ai div e ai relativi link ho dato z-index 10, solo che ora i link non possono essere clickati -.-" Se gli metto uno z-index maggiore non dovrebbero "uscire fuori" in teoria e non venire coperti?

[cavicchiandrea]

#overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
display:none;
}
al click cambi lo stato in block e gli associ il click che chiude l'overlay e fa scomparire il div

[sgogghy]

Ti posto un codice che ho usato più volte

<script src="http://code.jquery.com/jquery-latest.js"></script><script>
$(document).ready(function() {
    $('.button_slider').click(function() {
        var $lefty = $('#slider');
        $('div.overlay').fadeIn(200);
        $lefty.animate({
          right: parseInt($lefty.css('right'),10) == 0 ? 
            -$lefty.outerWidth() : 0
        });
      });
      
      $('div.overlay').click(function(){
            var $lefty = $('#slider');
          $lefty.animate({
          right: parseInt($lefty.css('right'),10) == 0 ? 
            -$lefty.outerWidth() : 0
        });
        $('div.overlay').fadeOut(200);
      });
});
</script>


<style>
.button_slider{
    padding:10px;
    background:#333;
    color:#fff;
}
#slider {
    background:#333;
    font-family: Arial, Helvetica, sans-serif;
    height: 175px;
    margin: 15px 0 0 0px;
    padding: 70px 20px 0; /* top right bottom left */
    margin-top:40px;
    top: 0;
    width: 200px;
    position: fixed;
    z-index:+2;
    right: -250px;
    border:1px solid #fff;
    color:#fff;
}
div.overlay{
    background:#000000;
    opacity:0.6;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:+1;
    display:none;
}
</style>


<a href="#" class="button_slider">newsletter</a>


<div class="overlay"></div>


<div id="slider" >
    TEXT
</div>

Vedrai che ho settato lo z-index soltanto all'overlay e alla div che deve comparire, così tutto il body e gli altri elementi hanno di default z-index:0;
Il codice è semplice ma se ti servono chiarimenti dimmi pure

[Kronim]

Ho risolto con il suggerimento alla prima risposta! Grazie mille per il tempo e l'aiuto