Salut, j'ai créer un modal en javascript, qui, est censé caché toute la page mais, cela ne fonctionne pas, plus. J'explique mon code et / mon probleme, en gros, sur ma page, il y a une box nommé box-head dans le css qui est cachée, lors de l'animation en JS, mais, je viens de créer un systeme d'ajout de post, qui utilise presque exactement le meme css que box-head, mais lorsque l'animation JS s'ouvre, le post est toujours visible, voici mes codes :

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".fa-times");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

Puis le box-head:

.box-head{
    top: 0%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 500px;
    height: 300px;
    display: flex;
    background: #ffffff;
}

.box-head::before{
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: #95a5a6;
    z-index: -1;
}

.box-head::after{
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: #95a5a6;
    z-index: -1;
    filter: blur(40px);  
}

Ainsi le box-post

.box-post{
  top: 0.1%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 500px;
  height: 150px;
  display: flex;
  background: #ffffff;
}

.box-post::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: #95a5a6;
  z-index: -1;
}

.box-post::after{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: #95a5a6;
  z-index: -1;
  filter: blur(40px);  
}

Je précise que les 2 sont dans des div.

Vous pouvez m'aider ? merci !

Je suis pas sûr de bien comprendre ta question mais je vais tenter : 

J'aurais personnellement utiliser element.classList pour manipuler les classes de ta div et lui ajouter la classe "hide", et j'airais appliqué un display: none sur cette classe.

Lorsque tu veux la réafficher il te suffit de réutiliser classList pour supprimer cette classe. 

https://developer.mozilla.org/fr/docs/Web/API/Element/classList

Enfait, voila mon probleme en image:

A ce moment la tout va bien mais, la est le probleme:

On voit bien que le POST passe au dessus du modal.

Ha oui avec les screen c'est plus parlant et ma méthode est un peu crade niveau UX du coup. 
Quand la modal est active, essaye de lui passer un z-index: 1 pour la faire passer au premier plan

Dans show-modal, j'ai ajouter z-index: 1 mais, la il ne s'affiche plus du tout.

Pour vérifier que tu n'as pas un conflit au niveau des z-index tente ça sur ton show-modal : 

position: absolute;
 z-index: 99;

-
Edité par Mzalbil2 26 janvier 2020 à 18:38:27

Oops, non rien dit, j'avais mis display: none ;), ca marche meci