Alert personnalisée (divs)
Résolu
kronkool
Messages postés
104
Date d'inscription
Statut
Membre
Dernière intervention
-
kronkool Messages postés 104 Date d'inscription Statut Membre Dernière intervention -
kronkool Messages postés 104 Date d'inscription Statut Membre Dernière intervention -
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?
A voir également:
- Alert personnalisée (divs)
- Sonnerie personnalisée android - Guide
- Liste personnalisée amis facebook - Guide
- Comment faire une bordure de page personnalisée sur word - Guide
- Impression enveloppe personnalisée gratuit - Télécharger - Bureautique
- Adresse mail personnalisée gmail - Guide
6 réponses
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
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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