Alert personnalisée (divs)
Résolu
Bonjour,
pour mon site je cherche a faire une sorte de alert personnalisée
pour cela, j'ai créé deux divs: une (div1 en display:none height:100% width:100% et une autre (div2) en display:none height:100px width:80% margin-top: 20%
lorsque l'on clique sur un bouton, les deux divs doivent apparaitre avec une transition
la première div doit recouvrir l'ecran pour le griser et la seconde contient le message.
vous voyez ce que je veux dire?
pour mon site je cherche a faire une sorte de alert personnalisée
pour cela, j'ai créé deux divs: une (div1 en display:none height:100% width:100% et une autre (div2) en display:none height:100px width:80% margin-top: 20%
lorsque l'on clique sur un bouton, les deux divs doivent apparaitre avec une transition
la première div doit recouvrir l'ecran pour le griser et la seconde contient le message.
vous voyez ce que je veux dire?
6 réponses
-
Il manque au moins "position: absolute" pour div1
-
oui c'est exact mais je l'avais mis
je vais vous mettre mon CSS entier:
.pagealerthtml{ //pour le fond de la page
position: absolute;
width:100%;
height:100%;
background-color:grey;
opacity:0;
display:none;
transition-property: opacity;
transition-duration: 2s;
}
.alerthtml{ //pour le message
position: absolute;
width:60%;
height:25%;
margin-top:20%;
margin-left:20%;
background-color:white;
opacity:100;
display:none;
}
et le javascript:
function onclick(){
document.getElementById('pagealerthtml').style.display="block";
document.getElementById('pagealerthtml').style.opacity=1;
document.getElementById('alerthtml').style.display="block";
}
voilà tout mon code -
Voilà, ça marche avec ce code :
<html> <head> <style type="text/css"> #pagealerthtml { position: absolute; width:100%; height:100%; background-color:grey; display:none; } #alerthtml { position: absolute; width:60%; height:25%; margin-top:20%; margin-left:20%; background-color:white; display:none; } </style> <script type="text/javascript"> function showAlert(){ document.getElementById('pagealerthtml').style.display="block"; document.getElementById('pagealerthtml').style.opacity=1; document.getElementById('alerthtml').style.display="block"; } </script> </head> <body> <div id="pagealerthtml"><div id="alerthtml">Hello!!!</div></div> <p onclick="showAlert()">Open</p> </body> </html> -
merci mais ce que je veux c'est arriver à faire une transition...
-
Utilisez JQuery par exemple.
Pour faire de beaux effets, ce n'est pas pratique de travailler avec du JS directement. -
Regardez ces 2 pages :
https://api.jquery.com/show/
https://api.jquery.com/hide/
il y a des exemples de codes avec JQuery pour afficher/cacher un element de façon progressive.
sinon il y a la fonction animate() (lien ci-dessous) pour faire des animations personnalisées.
https://api.jquery.com/animate/
Hamza
