HTML et javascript : probleme avec les popup
Résolu/Fermé
firpic
Messages postés
101
Statut
Membre
-
firpic Messages postés 101 Statut Membre -
firpic Messages postés 101 Statut Membre -
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
Et la le code css :
Et enfin le code JavaScipt :
Je remercie tout ce qui m'aideront.
Cordialement FirPic.
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:
- HTML et javascript : probleme avec les popup
- Editeur html - Télécharger - HTML
- Telecharger javascript - Télécharger - Langages
- Br html ✓ - Forum Webmastering
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi ✓ - Forum Javascript
