Contenu dans div en display : block au clic qui est tjrs afficher

<div id="bloc-profil" href="#barre-profil" data-toggle="modal">


        <img src="http://cyz.esy.es/phpBB3/download/file.php?avatar=<?php echo "$avatar"; ?>" alt="description" class="avatar" width="40px" height="40px">

        <div class="pseudo"><?php echo "$pseudo"; ?></div>

        <img src="http://cyz.esy.es/css/images/fleche-profil.png" alt="description" class="profil">

</div>
-_- MON CONTENU QUI BUG -_-
<div id="barre-profil">

</div>
 <script>
/**
 * Fonction modal()
 * Affecte ou retire une classe
 **/
var modal = function(element) {
    var elementLink = element.getAttribute('href'),
        target = document.querySelector(elementLink);

    target.classList.toggle('modale--show');
};

/**
 * Liens pour ouvrir une modale assignée
 **/
var modalOpener = document.querySelectorAll('[data-toggle="modal"]');

/**
 * Appeler la fonction modal() au clic sur chaque élément distinctement
 **/
for (var i = 0; i < modalOpener.length; i++) {
    modalOpener[i].addEventListener('click', function(event) {
        event.preventDefault();
        modal(this);
    });
}
</script>  

#bloc-profil{
    min-width: 1px;
    float: right;
    height: 57px;
    background-color: transparent;
    cursor:pointer;

}

#bloc-profil:hover{
    background-color: black;
    border-bottom: 3px solid white;
    transition: border-bottom .3s;
}

.modale{
    width:100%;
    height:200px;
    background-color: #2C2C2C;
    display: none;
}


.modale--show{
    width:100%;
    height:200px;
    background-color: #2C2C2C;
    display: block;
}


#deconnexion{
    background-image: url('images/deconnexion.png');
    width:128px;
    height:128px;

}

<div id="barre-profil">
    <div id="deconnexion">
</div>