Comment personnaliser le positionnement d'une boite d alert

Bonjour,

flexi2202 a écrit :
je me retrouve devant une dernière difficulté

Ça m'étonnerait que ce soit la dernière !

flexi2202 a écrit :
j'ai préparé un petit projet

Comme quoi, quand on veut, ce n'est pas si difficile que ça de fabriquer un exemple !

Ceci étant, ce "petit projet" contient 2 particularités très intéressantes même pour un développeur expérimenté, qui méritent qu'on s'y attarde.

1) La première particularité, c'est l'emploi d'une balise appelée <alert>. C'est inventif mais ce n'est pas du html standard (il n'y a pas de balise <alert> en html). On a le droit d'utiliser des balises dites "custom" (c'est à dire non définies dans le standard html), mais si on le fait, il faut que le nom de la balise contienne un tiret "-".

<alert>Salut ! </alert>

... n'est pas permis.

<my-alert>Salut ! </my-alert>

... est permis.

On notera quand même au passage que ça continue d'évoluer pas mal en ce qui concerne les "customs elements". Pour ce qui est des noms des "customs elements", voir par exemple https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name

2) La deuxième particularité est la redéfinition de la fonction js alert().

C'est possible de le faire, mais c'est juste un peu inhabituel et peut-être pas très indiqué dans ton cas. En effet, tu as besoin d'afficher une "alerte" d'une manière assez particulière (en l'occurence près du nom d'un "article"). Il vaudrait donc mieux se créer une fonction d'alerte spécifique ayant un autre nom et non redéfinir la fonction alert() standard de js qui peut servir à tout autre chose par ailleurs, et qui donc requiert un affichage passe-partout comme par exemple en haut de l'écran ou au milieu.

Ceci étant, c'est très intéressant de voir ici la fonction alert() redéfinie. Ça me donne pas mal d'idées auxquelles je n'avais pas pensé jusqu'à présent (en particulier, disposer d'un moyen simple pour mettre du html dans le texte des alertes qui soit vu comme du html et pas seulement du texte, ce qui n'est pas possible avec la fonction alert() standard).

3) Comme faire alors pour afficher l'alerte près des articles ?

- déjà, dans les onclick() on va utiliser une fonction ayant un autre nom comme par exemple ouvreMaJolieAlert() au lieu de alert().
- ensuite, on va supprimer complètement l'usage de la balise <alert>.
- ensuite, on va remplacer les balises <a> par des balises <button> qui seront plus commodes (car quand on clique sur un <a href="#"> dans ton exemple, comme le lien est "#', ça a pour effet de dire au navigateur de remonter en haut de page et ce n'est pas ce qu'on veut ici).
- et enfin, dans ouvreMaJolieAlert(), on va créer tout ce dont on a besoin pour pouvoir afficher un message près du nom des articles sur lequel on clique. Un exemple possible ici : https://jsfiddle.net/parsimonhi/uhr4qk7t/

EDIT: ma réponse s'est croisée avec celle de Laurent. Je le rejoins en ce qui concerne les addEventListener au lieu des onclick. Ce serait mieux en effet.

Amicalement,
Modifié par parsimonhi (17 Jan 2022 - 15:18)

un tout grand merci a vous deux

je vous réponds tantôt et je regarde cela de plus près

Apparemment ce sont ces deux propriétés

position:fixed;
  z-index:999;

Bonjour,

Ça ? https://jsfiddle.net/parsimonhi/puegd8f5/

Amicalement,

Bonjour,

Tout est dans l'exemple. Le point important est l'utilisation dans le css d'un pseudo-element ::before pour la boite qui contient l'alerte. On donne à ce pseudo-element la taille de la fenêtre entière et un fond semi-transparent. Le reste, c'est du détail pour que l'ensemble fonctionne.

Amicalement,

Bonjour

ah ok je regarde tout cela demain matin
car depuis des heures que je cherche , je dois me reposer
Encore un tout tres grand merci

je reviens demain dire quoi

bonne nuit