28172 sujets

CSS et mise en forme, CSS3

[Résolu] Boîte modale

Bonjour à tous
Suite du fil https://forum.alsacreations.com/topic-1-88892-1-Resolu-Trous-de-memoire.html

Pour afficher une message d'erreur, je voudrais rendre la fenêtre du message modale, c'est à dire mettre un cache translucide sur la page tant que le message est affiché.
J'ai écrit :

#message {display:none}
#message.active {
    display:block;
    ...
}
#message.active::before {
    position:fixed;
    left:0;
   top:0;
   width:100vw;
   height:100vh;
   background: rgba(0, 0, 0, 0.25);
}


Je constate sans comprendre que le cache ne s'affiche pas quand le message devient actif.

Merci pour votre aide.
Bien sûr! C’est le genre de chose qu’on ne voit pas alors qu’elles devraient vous crever les yeux. Smiley eek Smiley confused
Il est vrai que voir une absence…. Smiley cligne
Hélas mon idée pour rendre la boîte modale ne marche pas pour deux raisons
1 - contrairement à ce que je pensais position:fixed ne prend pas pour référence la page entière, mais l'origine de la boîte. Cela est dû à ce que la boîte a un 
transform: translateX(-50%);
nécessaire pour la centrer horizontalement sur la page.
2- si on clique en dehors de la boîte, donc sur le cache, l'évènement est remonté à la boîte, ce qui n'est pas ce que je veux
Plutôt que bidouiller le code, j'ai
a) attaché le cache à body

body.modal::after {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.25);
	z-index:10;
}

b) mis/enlevé par JavaScript la classe "modal" à l'élément document.body chaque fois que je rends la boîte active ou inactive.

Auriez vous une solution purement CSS à ce problème ? C'est la boîte qui est modale, ce n'est pas <body> !!!
Modifié par PapyJP (30 Sep 2021 - 12:56)
Administrateur
Bonjour,

1- C'est assez… surprenant quand cela arrive. La meilleure solution est si possible de faire de la modale un descendant de body, en dehors (à côté) du contenu le plus possible. On s'évite des soucis de z-index aussi.
2- J'appelle ça overlay par habitude : j'en ai fait un élément (div vide) qui précède la modale et basta. De plus en plus je copie ce que fait Bootstrap parce que ça a été testé dans à peu près toutes les solutions possibles ; c'est très robuste. Les 2 (cache et modale) peuvent être manipulés par l'ajout et suppression d'une classe sur body si on ne veut pas de JS compliqué.
EDIT: BS n'a plus de div vide pour représenter l'overlay mais je crois que je continue à l'implémenter ainsi. Je te laisse inspecter leurs exemples sans/avec scroll mais perso j'ai trop de modales complètement différentes visuellement dans notre projet actuel.
Modifié par Felipe (30 Sep 2021 - 16:17)
Merci de ta réponse
Cette approche (cache [=overlay] et modale) est celle que j’utilise dans d’autres circonstances. J’ai voulu voir si je pouvais faire mieux: pas gagné !
Dans le cadre de cette page (simple feuille de saisie) je vais en rester là.
Sujet clos
Aller à