Alert personnalisée (divs)
Résolu/Fermé
kronkool
Messages postés
104
Date d'inscription
mardi 26 février 2013
Statut
Membre
Dernière intervention
12 septembre 2013
-
1 mai 2013 à 11:58
kronkool Messages postés 104 Date d'inscription mardi 26 février 2013 Statut Membre Dernière intervention 12 septembre 2013 - 4 mai 2013 à 13:20
kronkool Messages postés 104 Date d'inscription mardi 26 février 2013 Statut Membre Dernière intervention 12 septembre 2013 - 4 mai 2013 à 13:20
A voir également:
- Alert personnalisée (divs)
- Sonnerie personnalisée android - Guide
- Comment mettre une alarme personnalisée sur iphone - Guide
- Sonnerie personnalisée - Guide
- Carte personnalisée google maps - Guide
- Carte de voeux personnalisée gratuite - Guide
6 réponses
hamzafes
Messages postés
243
Date d'inscription
lundi 26 juin 2006
Statut
Membre
Dernière intervention
4 mai 2013
54
1 mai 2013 à 12:35
1 mai 2013 à 12:35
Il manque au moins "position: absolute" pour div1
kronkool
Messages postés
104
Date d'inscription
mardi 26 février 2013
Statut
Membre
Dernière intervention
12 septembre 2013
26
1 mai 2013 à 12:56
1 mai 2013 à 12:56
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
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
hamzafes
Messages postés
243
Date d'inscription
lundi 26 juin 2006
Statut
Membre
Dernière intervention
4 mai 2013
54
1 mai 2013 à 15:52
1 mai 2013 à 15:52
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>
kronkool
Messages postés
104
Date d'inscription
mardi 26 février 2013
Statut
Membre
Dernière intervention
12 septembre 2013
26
1 mai 2013 à 16:01
1 mai 2013 à 16:01
merci mais ce que je veux c'est arriver à faire une transition...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
hamzafes
Messages postés
243
Date d'inscription
lundi 26 juin 2006
Statut
Membre
Dernière intervention
4 mai 2013
54
1 mai 2013 à 17:03
1 mai 2013 à 17:03
Utilisez JQuery par exemple.
Pour faire de beaux effets, ce n'est pas pratique de travailler avec du JS directement.
Pour faire de beaux effets, ce n'est pas pratique de travailler avec du JS directement.
kronkool
Messages postés
104
Date d'inscription
mardi 26 février 2013
Statut
Membre
Dernière intervention
12 septembre 2013
26
1 mai 2013 à 17:21
1 mai 2013 à 17:21
je ne connais pas du tout le JQuery je vais étudier cela merci
sinon aurais-tu un petit code de JQuery tout pret pour moi stp?
sinon aurais-tu un petit code de JQuery tout pret pour moi stp?
hamzafes
Messages postés
243
Date d'inscription
lundi 26 juin 2006
Statut
Membre
Dernière intervention
4 mai 2013
54
Modifié par hamzafes le 4/05/2013 à 11:34
Modifié par hamzafes le 4/05/2013 à 11:34
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
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
kronkool
Messages postés
104
Date d'inscription
mardi 26 février 2013
Statut
Membre
Dernière intervention
12 septembre 2013
26
4 mai 2013 à 13:20
4 mai 2013 à 13:20
merci beaucoup ce va bien m'aider :)