Comment personnaliser le positionnement d'une boite d alert

bonjour a tous

je suis occupé a me créer un mini panier sur mon site et après avoir surmonter la plupart de mes problèmes grâce a vous

je me retrouve devant une dernière difficultés

Dans ce panier il y a plus de 200 articles et donc lorsque un client clic sur un article je souhaiterais que l article puisse s'ajouter au panier (cela est réglé )mais qu une boite d alert en javascript en modal en jquery aucune importance puisse s'afficher mais a proximité de l article cliquer

Je viens de trouver un code pour créer des alertes personnalisée comme je souhaite
le problème est que lorsque je clic sur un article dans le fond de ma page
la boite d alerte remonte tout le code pour venir s afficher en haut de l écran

j'a! essaye de trifouiller un peu dans le code mais ans succès

j'ai préparé un petit projet si vous pourriez m'aider merci
https://codepen.io/flexi2202/pen/MWExvLV
on voit que lorsque on choisi l article 40 dans le fond de la page que l on clic dessus que la boite de dialogue vient s afficher en haut de la page

salut Laurent

Merci pour la réponse
Ce code ne vient pas de moi ...
reprenons les choses une par une
vu que je suis nul en javascript et que c est le dernier morceau qui me manque
remplacer le onclick de cette façon ?
Mais du coup je fais comment pour remplacer le id dans le script
pour réaliser cette boucle elle va devoir boucler plus de 1000 lignes de codes car chacun de mes articles est accompagne d'une photo , un descriptif , un prix ect....

<a id="myBtn">Try it</a>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

oui je me suis bien douter du # que c'était lui le responsable

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)

Salut !

flexi2202 a écrit :
remplacer le onclick de cette façon ?
Mais du coup je fais comment pour remplacer le id dans le script
pour réaliser cette boucle elle va devoir boucler plus de 1000 lignes de codes car chacun de mes articles est accompagne d'une photo , un descriptif , un prix ect....

Oui de cette façon mais en passant par une classe commune comme j'ai dit
Pour gérer les contenu j'utiliserait des objets Js articles_text articles_img etc mais a toi de voir, tu peux les inclure dans ton HTML et les récupérer à la volée si tu préfères et si ca t'évite de retaper tout.

Voila un petit exemple : https://jsfiddle.net/undless/50gapycm/

flexi2202 a écrit :
oui je me suis bien douter du # que c'était lui le responsable

Yas, du coup +1 pour parsimonhi et la suggestion des boutons

parsimonhi a écrit :
1) La première particularité, c'est l'emploi d'une balise appelée &lt;alert&gt;.

Oui ca m'a choqué aussi. Vaut mieux changer le nom on évitera toute forme de soucis.
Prévenir > guérir

parsimonhi a écrit :
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.

Ah ca je savais pas... merci pour l'info !
Modifié par _laurent (17 Jan 2022 - 16:11)

un tout grand merci a vous deux

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

bonsoir parsimonhi
Merci pour ta réponse

en principe si cela est la dernière petite chose a régler du moins pour ce projet
Je ne vois pas ce que je pourrais ajouter encore a ce prjet mdrrrr

Euhhh l 'exemple ne vint pas de moi ,je me suis juste inspiré sur quelque chose qui existait

Merci pour l exemple alert...

Très intéressant la page dont tu me donne le lien ...


l utilisateur en haut de la page , dommage vraiment dommage
Mais il est évident que cela pourrait servir pour autre chose

en fait voici un extrait du code de mon lien

 <div class="col-md-12 text-end">
                                          <a style="cursor:pointer;" data-nom="3001" data-prix="1.00" class="btn btn-primary ajouter-panier">ajouter au panier</a>
                                       </div>

je regarde a l instant ton exemple qui me semble pas mal peut être pouvoir ajouter quelque chose pour pas que l utilisateur ne puisse cliquer sur un autre article que lorsqu il a fermer le pop up précèdent


C'est vrai que lorsque j'ai vu ce code , cela m'a aussi donne des idées et je m'étais dit chouette je vais m'en servir mais malheureusement le popo up de l'alerte ramène

un énorme merci pour ton code je vais faire des essais

salut laurent
Merci pour les explications je regarde ton code aussi
Un grand merci

je teste tout ca

parsimonhi
il est génial ce code un grand merci

seul petit ajustement ne savoir cliquer sur un autre article que quand le fenêtre sera fermée
j'ai tente des petites choses dans le css mais sans succès
Modifié par flexi2202 (17 Jan 2022 - 19:15)

Apparemment ce sont ces deux propriétés

position:fixed;
  z-index:999;

Bonjour,

Tu veux ne pas pouvoir cliquer ailleurs tant que l'alerte est visible ?

Ou bien tu ne veux pas qu'il y ait 2 alertes en même temps ?

Amicalement,

bonjour parsimonhi
merci pour la réponse et le temps consacré
je souhaiterais avoir la même chose que sur mon exemple
https://codepen.io/flexi2202/pen/MWExvLV
quand on clic sur un article
la pop up apparaît
le fond devient plus sombre et pour sortir on ne sait que cliquer sur ok

Bonjour,

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

Amicalement,

ouiiiiiiiiiiii
c'est super nickel top
comment as tu fais ?
tu as ajouter quoi dans le code par curiosité
Car je cherche depuis tantôt

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