HTML et javascript : probleme avec les popup

Résolu/Fermé
firpic Messages postés 90 Date d'inscription   Statut Membre Dernière intervention   -  
firpic Messages postés 90 Date d'inscription   Statut Membre Dernière intervention   -
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

tuko
 
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   Statut Membre Dernière intervention   1
 
Je te remercie, cela fonctionne a merveille maintenant.
0