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.
Afficher la suite
14 sept. 2021 à 08:13