Hey !
Salut à tous. Aujourd'hui, j'essayais de faire moi même des jolies "pop-up" en JS.
Le principe est simple, quand on appui sur un lien comprenant une class donnée alors on donne une class particulière à la balise div juste après (contenu de ma pop-up) et à une balise d'id donnée (background).
Mon background est là pour assombrir le reste de la page et mettre en avant la pop-up.
Mon code JS marche très bien, mes balises change de class comme il faut.
Mon problème à l'air de venir du CSS… Je voudrais assombrir toute ma page avec le background, sauf ma pop-up. Pour cela j'utilise la propriété CSS z-index, en mettant ma pop-up à 10 et mon background d'assombrissement à 9.
Voilà mon code HTML & CSS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE HTML> <html> <head> <!-- mes balises meta et inclusions de styles et scripts --> </head> <body> <!-- Mon background pour assombrir --> <div id="JSPopUp-background" class="no-actif"></div> <div id="content"> <!-- ... --> <!-- Mon lien faisant apparaître ma pop-up --> <a href="#" id="contact" class="JSPopUp">Mon lien de pop-up</a> <!-- Ma pop-up --> <div class="JSPopUpContent no-actif"> Contenu de ma pop-up </div> <!-- ... --> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | a.JSPopUp + div.JSPopUpContent{ position: absolute; z-index: 10; min-width: 500px; min-height: 200px; left: 50%; transform: translate(-50%, 0); background: white; } a.JSPopUp + div.JSPopUpContent.no-actif{ display: none;} a.JSPopUp + div.JSPopUpContent:not(.no-actif){ display: block;} div#JSPopUp-background:not(.no-actif){ position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background: black; opacity: 0.5; z-index: 9; } div#JSPopUp-background.no-actif{ display: none;} div#JSPopUp-background:not(.no-actif){ display: block;} |
Je ne comprend pas pourquoi ma div#JSPopUp-background se met devant ma pop-up div.JSPopUpContent alors que les z-index sont bien spécifiés…
Quelqu'un a une idée?
