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

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous. J'ai un soucis : lorsque je met du contenu dans ma div en display none puis block au clic, le contenu ne prend pas en compte du tout le data-toggle="modal". Il est toujours en display:block. Dois-je en refaire pour chaque div que je vais inclure dans ma div principale barre-profil ? -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>  

Merci d'avance

Édité par Coyote

+0 -0

Hello !

Si tu avais un peu plus de précisions et le CSS ça pourrait nous aider :)

Maintenant je pencherai pour un problème de poids des sélecteurs, un sélecteur d'id à plus d'importance qu'un sélecteur de classe. Du coup si le display:none est affecté via un id et le display:block via une classe le display:none va rester actif !

Dev' web en alternance | LP CRSPM Laval

+0 -0
Auteur du sujet

Pour le css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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;

}

Pour ce qu'est du contenu j'utilisais des id comme ci-dessus

Ce qui me donne donc :

1
2
3
<div id="barre-profil">
    <div id="deconnexion">
</div>

Si ça ne suffit pas je peux te passer un compte de test sur le site

Édité par sparadra1

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte