HTML et javascript : probleme avec les popup

Résolu/Fermé
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 13 sept. 2021 à 18:43
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 14 sept. 2021 à 08:13
Bonjour,

voila j'ai pris un code pour faire des popup mais ne retourne qu'il n'y arrive pas.
J'ai pourtant chercher des solution. J'ai essaye de prendre le programme tout fais sur le forum, il fonctionne mais des que je l'adapte a mon code, il ne fonctionne plus

Voici le code html 
<!DOCTYPE html>
<html lang="en">
<head>
    <?php include('head.php'); ?>
</head>
<body>
    <div class="div-nav">
        <img src="img/logo.PNG" alt="logo" class="div-nav-img">
        <h1 class="div-nav-h1">PassHash</h1>
        <div class="div-nav-div">
            <button id="btn-img-user" class="hide" ><img src="img/user.png" alt="user-img" class="user-img" title="Se Connecter"></button>
            <div id="pop-user" style="position: absolute;display: none;">
                <h6>cc</h6>
            </div>
            <span class="div-nav-div-span"></span>
            <button id="btn-img-add-user" class="hide"><img src="img/add-user.png" alt="add-user-img" class="add-user-img" title="S'inscrire"></button>
        </div>
    </div>
</body>
<script src="popup-user.js"></script>
</html>


Et la le code css : 
body{
    background-color:darkcyan;
    color: bisque;
}

/* entete */
.div-nav{
    background-color: cadetblue;
    padding-left: 5px;
    border-radius: 20px;
    left: 0px;
    right: 0px;
    height: 75px;
    position: relative;

}

.div-nav-h1{
    font-size: 25px;
    padding-top: 20px;
}
.div-nav-img{
    width: 50px;
    height: 50px;
    padding: 10px;
    float: left;
}

    /* user */
.user-img{
    width: 20px;
    height: 20px;
    float: left;
    padding: 2px;
    border: 2px solid rgb(27, 206, 212);
    background-color: rgb(27, 206, 212);
    border-radius: 50px;
}
.add-user-img{
    width: 20px;
    height: 20px;
    float: left;
    padding: 2px;
    border: 2px solid rgb(27, 206, 212);
    background-color: rgb(27, 206, 212);
    border-radius: 50px;
}
.div-nav-div{
    width: 150px;
    position: absolute;
    transform: translateY(-50%);
    top: 25%;
    right: 0%;
}
.div-nav-div-span{
    color: black;
    border-left: 2px solid #000;
    display: inline-block;
    height: 25px;
    margin: 0 5px;
    float: left;
}

.hide{
    float: left;
    background-color: cadetblue;
    border: none;
}
.show{
    float: left;
    background-color: cadetblue;
    border: none;
}


Et enfin le code JavaScipt : 
var popup = document.getElementById("pop-user")
var showpopup = document.getElementById("btn-img-user")
function hidePopupClass(){
    popup.className = "show"
    popup.style.display = "block"
}
function showPopupClass(){
    popup.className = "hide"
    popup.style.display = "none"
}
showpopup.addEventListener("click" , function(){
    switch(popup.className){
        case "hide": 
            hidePopupClass()
        break
        case "show":
            showPopupClass()
        break
        default: 
            alert("Erreur")
    }
})


Je remercie tout ce qui m'aideront.

Cordialement FirPic.
A voir également:

1 réponse

Réponse 1 / 1
tuko
13 sept. 2021 à 20:12
Bonsoir,

Le 
class="hide"
, c'est sur ton div 
pop-user
qu'il faut le mettre et non sur ton button.
0
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
14 sept. 2021 à 08:13
Je te remercie, cela fonctionne a merveille maintenant.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

Bonjour,

Quelle est la difference entre la balise
et
?

Pourquoi utiliser l'un et pas l'autre ?

Merci d'avance,

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

Bonjour,

Comme on lit un peu tout et son contraire sur internet, je voudrais savoir quelle est la balise que l'on doit utiliser pour un retour à la ligne en HTML5.

Merci. :)

Configuration: Windows 7 / Chrome 22.0.1229.79

11 réponses
Balise </br>
erf -
erf -

Bonjour,

Je viens de créer un site web, et je me suis rendu sur W3C afin d'obtenir le www. mais le site m'affiche une erreur "End tag BR" (pour la balise
), ce que je ne comprends pas vu que le balise
n'existe pas (il me semble...)

Pouvez-vous m'aider svp ?
Merci d'avance et bonne journée !

3 réponses
Espace en HTML
baissaoui -
baissaoui -

En HTML, les espaces consécutifs sont ignorés par les navigateurs, au même titre que les retours chariots ou les tabulations. Pour insérer plusieurs espaces consécutifs, il est nécessaire d'utiliser une entité HTML spécifique, appelée espace insécable, dont le code HTML est le suivant :   Pour faire des tabulations ou des mises en forme avancées, on peut recourir à la propriété CSS {white-space} . Cette propriété permet de définir si les espaces seront affichés ou pas. La valeur { white-space: pre } affiche tous les espaces. Voir la spécification du W3C et sa traduction en français

0 réponse
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

Bonjour,

Je ne savait pas comment faire un titre explicite donc voilà mon problème:

Je possède un système de news sur mon site mais à chaque fois lors de l'écriture je dois ajouter la balise
pour faire un saut de ligne.

J'ai cherché su google mais ne sachant pas quelle question poser j'ai du mal a bien cibler ma recherche.

Merci d'avance.

Configuration: Windows 7 / Firefox 5.0

13 réponses