Atelier Graphique et Web: Une alert box en CSS avec effet de disparition en jQuery

Une alert box en CSS avec effet de disparition en jQuery
Vous avez besoin d'un éditeur de texte (sublim text / notepad++)

Du fichier jquery compressé (Se rendre sur le site officiel de jQuery (https://jquery.com/download/)

Voici la composition du dossier

Code html-------------------------------------------------------

<!doctype html>


 <html lang="fr" class="no-js"> 
<head>
    <meta charset="utf-8" />
    <title>Alert box en css + dispariton en jQuery</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="css/style.css" />
    <script>
        document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
    </script>
</head>

<body role="document">
    

<div>
    <a href="#" class="cross">X</a>
    <p>...</p>
</div>

<div class="green">
    <a href="#" class="cross ">X</a>
    <p>...</p>
</div>

<div class="lightblue">
    <a href="#" class="cross ">X</a>
    <p>...</p>
</div>

    
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>

Code CSS-------------------------------------------------------

*{
margin:0;
}

/*
une div de couleur rouge d'une largeur de 600px et d'une hauteur de 80px
*/
div{
width:600px;
height:80px;
background:red;
position:relative;
margin:15px;
}

/*
j'enlève le soulignement du lien sur la croix
*/
a{
text-decoration:none;
}

/*
je personnalise la partie croix
*/
a.cross{
position:absolute;
background:#333;
color:#fff;
right:0;
padding:0 15px;
top:0;
}

/*
fond pour les autres alert
*/
.green{
background:lightgreen;
}

.lightblue{
background:lightblue;
}

/*
pour le paragraphe
centrage
et taille de police à 50px
*/
p{
text-align:center;
font-size:50px;
}

Code jQuery-------------------------------------------------------

$('.cross').on('click', function(){
    var elementParent = $(this).parent();
setTimeout(function() {
        $(elementParent).fadeOut();
    }, 100);
});

/*
        Explication

        Je mets un évènement "click" sur ma croix qui est au niveau du lien
        .cross fait référence à la classe du lien

        je mets une fontion dans lequel j'ai une variable que j'appelle "elementParent"
        Elle contient donc comme le nom de la variable l'indique le parent de la class croiss
        soit la div = conteneur principal de l'alert

        Le this fait référence à cross, ça évite de répéter
        c'est la même chose que si je faisais

        $('.cross').on('click', function(){
            var elementParent = $(.cross).parent();
             setTimeout(function() {
                $(test).fadeOut();
            }, 100);
        });

        ensuite "setTimeout()" c'est une fonction qui va me permettre de mettre un délais sur "elementParent"
        soit l'élément parent qui est div le conteneur

        je lui mets un "fadeOut()" ça va permettre de faire dispaître progessivement l'alert après
        le clic sur la croix

        durée 100 ms

        Je vous invite à aller voir le site MDN de mozilla ressources pour les développeurs

*/

Rechercher dans ce blog

Une alert box en CSS avec effet de disparition en jQuery

Modernizr