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 -
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
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
