PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → Fermer une popup en cliquant à l'extérieur de la popup
Fermer une popup en cliquant à l'extérieur de la popup
Débuté par Jeff, 03 fév. 2017 18:54 - 32 réponses
Posté le 03 février 2017 - 18:54
Bonjour,

Le problème doit être simple à résoudre, mais je sèche. Je veux fermer une popup en cliquant en dehors de la popup.

J'ai essayé Popupferme dans la page appelante en récupérant l'événement de clic mais bien sûr la popup ne peut plus s'ouvrir (elle est fermée dès qu'on clique !).

Dans le code de la popup je ne vois pas d'évènement pour récupérer un clic en dehors de la popup.

Avez-vous une idée ?

Merci.

Jeff
Posté le 04 février 2017 - 13:02
Bonjour JEff,

modifie ta popup pour qu'elle recouvre toute la page, avec seulement au
cntre la prtie visible.

De cette manière, les clic "en dehors" de la popup sont en fait des clic
dans ta popup et tu peux les détecter

Cordialement


--
Fabrice Harari
Consultant WinDev, WebDev et WinDev Mobile International

A votre disposition : WXShowroom.com, WXReplication (open source) et
maintenant WXEDM (open source)

Plus d'information sur http://fabriceharari.com


Le 2/3/2017 à 12:54 PM, Jeff a écrit :
Bonjour,

Le problème doit être simple à résoudre, mais je sèche. Je veux fermer
une popup en cliquant en dehors de la popup.

J'ai essayé Popupferme dans la page appelante en récupérant l'événement
de clic mais bien sûr la popup ne peut plus s'ouvrir (elle est fermée
dès qu'on clique !).

Dans le code de la popup je ne vois pas d'évènement pour récupérer un
clic en dehors de la popup.

Avez-vous une idée ?

Merci.

Jeff
Membre enregistré
127 messages
Popularité : +4 (6 votes)
Posté le 05 février 2017 - 09:22
Hum je tenterais le coup sur la position du popup et du pointeur de la souris si en dehors ferme le popup dans l’événement clic
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 06 février 2017 - 11:07
Bonjour Jeff,

Voici la méthode que j'utilises.

Traitement Chargement (onload) de la page qui contient la Popup :
JSEvénement(cachePopup,jsEvénementBody,jsEvénementClic,jsEvénementCapture)


Procédure navigateur "cachePopup" :
Procedure cachePopup(pclEvenementJS est un objet dynamique )
pclEvenementJS = Null
PopupFerme(POPUP_MaPopupAFermer)


Cordialement

--
René MALKA
Posté le 06 février 2017 - 19:57
Bonjour,

Je viens d'acheter Webdev 22. Je ne trouve pas les nouveautés 836, 837, 838,839 concernant les bulles personnalisables et les icônes ?

Existe-t-il une aide sur ce sujet ?

Merci.

César.
Posté le 07 février 2017 - 08:44
Jeff a émis l'idée suivante :
Bonjour,

Le problème doit être simple à résoudre, mais je sèche. Je veux fermer une
popup en cliquant en dehors de la popup.

J'ai essayé Popupferme dans la page appelante en récupérant l'événement de
clic mais bien sûr la popup ne peut plus s'ouvrir (elle est fermée dès qu'on
clique !).

Dans le code de la popup je ne vois pas d'évènement pour récupérer un clic en
dehors de la popup.

Avez-vous une idée ?

Merci.

Jeff


je plussoie sur la solution de Fabrice

mais dans quelle type d'interface souhaite tu que l'internaute clique
en dehors de la popup ? ça m'interesse. J'aime bien connaitre des cas
d'utilisation; cela peut donner des idées

Est-ce parce que ta popup risque d'être trop grande ? (en hauteur par
extension du contenu par ex) ?
est-ce pour faire comme les applis tablettes ? un tiroir qui doit se
replier quand on clique à l'extérieur ?
je dis ça parce que j'ai une appli (gd public) pour le programme télé
sur l'ipad qui se comporte comme ça et c'est très pénible, je trouve.
Posté le 07 février 2017 - 16:19
Bonjour,

Merci pour vos réponses. Je vais tester.

Concernant l'usage :

Il s'agit d'un bouton qui ouvre une petite popup avec un choix d'action. Et si on ne fait aucun choix, c'est plus simple de cliquer ailleurs dans la page plutôt que de cliquer sur une croix de fermeture.

Par ailleurs, comme la popup est petite, fermer la popup quand on sort de la popup risque de rendre la sélection délicate au moindre dérapage de souris. Je pourrais aussi peut-être mettre un timer pour éviter de fermer immédiatement la popup à la sortie, et l'arrêter si la souris reviens dans la popup.

Jeff
Posté le 07 février 2017 - 17:38
Bonjour,

Il veut faire un truc du genre :-)

http://diablotine.be/FR/robe.longue.dos.nu-5357-C-10.awp

1: Clique sur la grande photo (fond rose)
2: Clique à droite de la popup ouverte pour la refermer

Bien à toi,
Fabrice De Weerd
www.fawax.com/dev

Le 07-02-17 à 07:44, Roumegou Eric a écrit :
Jeff a émis l'idée suivante :
Bonjour,

Le problème doit être simple à résoudre, mais je sèche. Je veux fermer
une popup en cliquant en dehors de la popup.

J'ai essayé Popupferme dans la page appelante en récupérant
l'événement de clic mais bien sûr la popup ne peut plus s'ouvrir (elle
est fermée dès qu'on clique !).

Dans le code de la popup je ne vois pas d'évènement pour récupérer un
clic en dehors de la popup.

Avez-vous une idée ?

Merci.

Jeff

je plussoie sur la solution de Fabrice

mais dans quelle type d'interface souhaite tu que l'internaute clique en
dehors de la popup ? ça m'interesse. J'aime bien connaitre des cas
d'utilisation; cela peut donner des idées

Est-ce parce que ta popup risque d'être trop grande ? (en hauteur par
extension du contenu par ex) ?
est-ce pour faire comme les applis tablettes ? un tiroir qui doit se
replier quand on clique à l'extérieur ?
je dis ça parce que j'ai une appli (gd public) pour le programme télé
sur l'ipad qui se comporte comme ça et c'est très pénible, je trouve.
Posté le 08 février 2017 - 17:23
Bonjour,

Au final, la procédure de René est tout à fait ce que je cherchais.

Merci.

Jeff.
Posté le 18 septembre 2017 - 12:20
René a écrit :
Bonjour Jeff,

Voici la méthode que j'utilises.

Traitement Chargement (onload) de la page qui contient la Popup :
JSEvénement(cachePopup,jsEvénementBody,jsEvénementClic,jsEvénementCapture)


Procédure navigateur "cachePopup" :
Procedure cachePopup(pclEvenementJS est un objet dynamique )
pclEvenementJS = Null
PopupFerme(POPUP_MaPopupAFermer)


Cordialement

--
René MALKA


Bonjour,
J'adore !
Merci !
Posté le 08 avril 2019 - 11:54
Merci René pour le code
Ça marche niquel
Testé et approuvé en version 23

René a écrit :
Bonjour Jeff,

Voici la méthode que j'utilises.

Traitement Chargement (onload) de la page qui contient la Popup :
JSEvénement(cachePopup,jsEvénementBody,jsEvénementClic,jsEvénementCapture)


Procédure navigateur "cachePopup" :
Procedure cachePopup(pclEvenementJS est un objet dynamique )
pclEvenementJS = Null
PopupFerme(POPUP_MaPopupAFermer)


Cordialement

--
René MALKA
Membre enregistré
117 messages
Popularité : +1 (3 votes)
Posté le 27 mai 2019 - 16:30
Bonjour,
j'ai essayé et c'est pas vraiment optimal
Solution en JavaScriptip natif ( jai tout essayé avec JSEvénement mais rien) :

1) AU CHARGEMENT DE LA PAGE ( en JS et non WL)

window.onclick = function(event) {
   var el=event.target;
   if (el.style.left==="0px"&&el.style.top==="0px"&&el.id==="") {close_Popup();} 
}


2) PROCEDURE LOCALE NAVIGATEUR ( en WL)

Procedure close_Popup()
CelluleFermeDialogue(CELL_popup)


3) TEST AND ENJOY IT !!

--
WinDev Forever !!
Membre enregistré
31 messages
Popularité : +2 (2 votes)
Posté le 31 mai 2019 - 10:36
Bonjour,

Merci pour ce bout de code qui apporte effectivement une avancée significative vers une vraie fonctionnalité utile, quand on veut faire un site moderne et au goût du jour.

Par contre, j'aimerais aller plus loin...

Je voudrais que la popup se ferme, UNIQUEMENT quand je clique en dehors de cette popup. Car elle comprend des champs et des traitements et dès que je clique dans un champ, elle disparaît (ce qui est normal).

J'ai essayé différentes choses comme déplacer le code vers la popup ou changer l’événement mais rien n'y fait...

Des idées ? Merciiii
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 01 juin 2019 - 04:38
Bonjour Michel,

Effectivement, la solution que j'avais proposé concernait une popup contenant des boutons disposés en menu. Dans ce cas, la propagation du clique permet d'exécuter le traitement qui leur est associé et celui de la fermeture de la popup au niveau de la page est tout de même exécuté.

Quand la popup contient par exemple des champs de saisie, ou bien des boutons dont le traitement associé n’entraîne pas forcément la fermeture de la popup, alors il y a un problème : la popup se ferme au moindre clique sur la page !

Il faut alors agir au niveau de la procédure navigateur cachePopup() pour que la fermeture de la popup avec PopupFerme() soit conditionnelle.

Et la solution est relativement simple pour peu que l'on connaisse un peu jQuery.
Il y a même plusieurs possibilités. J'ai choisi la plus simple, avec la closest() :

Procedure cachePopup(pclEvenementJS est un objet dynamique )
SI jQuery(pclEvenementJS.target).closest("#"+POPUP_MaPopupAFermer..Alias).Length = 0 ALORS
PopupFerme(POPUP_MaPopupAFermer)
FIN


S'il y a des puristes dans le coin et qui désire connaître les autres possibilités je me ferais un plaisir de leur répondre ici ;)

Bon développements !

--
René MALKA
Membre enregistré
31 messages
Popularité : +2 (2 votes)
Posté le 11 juin 2019 - 17:38
Bonjour René,

Merci tout d'abord pour ce bout de code qui me semble très intéressant et que je vais tester dès que possible.

La curiosité étant un vilain défaut, alors je suis vilain et je suis très curieux de connaitre les autres possibilités que vous avez entrevues.

Merci encore et à vous lire.

Michel
Membre enregistré
31 messages
Popularité : +2 (2 votes)
Posté le 11 juin 2019 - 17:51
Ne connaissant pas du tout JQuery, à mon grand dam, je me permets de vous questionner sur l'implémentation de votre code dans Webdev.
J'imaginais simplement déclarer cette procédure navigateur dans la popup puis l'appeler sur un événement sur clic dans cette même popup.
Mais ça ne fonctionne pas...

Merciiiii
Posté le 29 août 2019 - 14:42
Bonjour René,

J'ai testé ton code "JSEvénement(cachePopup,jsEvénementBody,jsEvénementClic,jsEvénementCapture)" et il marche super bien sur PC et ANDROID.
Par contre, je n'arrive pas à le faire fonctionner sous IOS (IPHONE).
Est-ce qu'il y a une subtilité que je n'ai pas trouvé. J'ai fait le test sous SAFARI et sous CHROME. Dans les deux cas, le code ne fait rien.
J'ai testé aussi le code JS :
window.onclick = function(event) {
var el=event.target;
if (el.style.left==="0px"&&el.style.top==="0px"&&el.id==="") {cachePopup();}
}


Est-ce quelqu'un aurait une piste?


Merci d'avance
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 29 août 2019 - 16:02
Bonjour Michel,
Désolé de cette réponse tardive : je n'avais pas été notifié de votre message....

1- Pour bien comprendre la réponse #14 il faut avoir bien compris le message #4. C'est dans ce dernier que sont indiqué les traitements dans lesquels insérer le code proposé.

2- La réponse #14 prend en compte le fait que les cliques de souris à l'intérieur de la popup ne doivent pas la fermer. L'utilisation de la fonction jQuery closest() permet de déterminer si le clic est à l'intérieur de la popup ou pas.

3- Effectivement, d'autres fonctions jQuery permettent d'obtenir le même résultat... mais comme vous dites que vous ne connaissez rien à jQuery.... Pourtant le net regorge de sites d'informations, de formations gratuites et même de vidéo relatifs à jQuery ;) Le fait que jQuery soit intégré au WLangage est un autre vrai gros plus à WebDev !

Bon dev !

--
René MALKA
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 29 août 2019 - 16:10
Bonjour Arnaud,

C'est intéressant comme information de savoir que ce code, plutôt standard, fonctionne sous Android / Chrome mais pas sous IOS / Safari et Chrome ! Malheureusement sans autres précisions sur le dysfonctionnement je vais avoir du mal à t'aider....

Mais voici quelques pistes :
- Il faut examiner le code source généré par Webdev et vérifié que jQuery est bien actif
- Est-ce qu'une utilisation ultra basique de jQuery fonctionne ?!
- Est-ce que l'utilisation de jQuery for Mobiles change quelque chose ?!
- Consulter la console du navigateur afin d'y trouver ou pas des messages d"erreur relatifs lors des cliques ou touchés

Le code que j'ai fourni se base essentiellement sur du WLangage. En conséquence je pense qu'une soumission au Support Technique de PC-SOFT doit pouvoir s'envisager pour avoir leur avis....

Espérant avoir aidé malgré tout....

Bon dev !

--
René MALKA
Message modifié, 29 août 2019 - 16:11
Posté le 29 août 2019 - 16:42
Bonjour,

Pour faire avancer, je viens d'ajouter le code suivant :
JSEvénement(cachePopup,jsEvénementBody,jsEvénementTouchEnd,jsEvénementCapture)
dans ce cas la fonction est bien exécuté, mais lorsque je clique sur un bouton de la popup, la popup se ferme et le code du bouton ne fonctionne pas.

Que faire ?

Merci d'avance
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 29 août 2019 - 17:56
Arnaud,

Remplacer jsEvénementClic par jsEvénementTouchEnd est judicieux... mais "normalement" inutile...
Bref il y a trop d'inconnues dans le problème.
Pour bien faire il faudrait m'envoyer un page avec exemple minimaliste que je regarde de prêt.
Par mail ou par un lien Dropbox ou autre.

Cordialement

--
René MALKA
Membre enregistré
5 messages
Popularité : +1 (1 vote)
Posté le 21 janvier 2020 - 12:18
Je déterre un peu le sujet mais n'ayant pas réussi à faire fonctionner correctement vos exemples, j'ai trouvé une solution qui fonctionne très bien chez moi pour fermer la popup en cliquant en dehors de celle-ci tout en pouvant interagir avec les champs :

Traitement Chargement (onload) de la Popup :
JSEvénement(cachePopup,jsEvénementForm,jsEvénementClic)

gbDehors est un booléen = Vrai


Entrée en survol (onmouseenter) de la Popup :
gbDehors = Faux


Sortie de survol (onmouseleave) de la Popup :
gbDehors = Vrai


PROCÉDURE locale navigateur cachePopup()
SI gbDehors ALORS
PopupFerme(POPUP_MaPopup)
FIN


Voilà, si mon code peut aider quelqu'un...
Message modifié, 21 janvier 2020 - 12:19
Membre enregistré
324 messages
Popularité : +21 (51 votes)
Posté le 22 janvier 2020 - 08:33
Perso je fais aussi comme Michael mais sans aucun Javascript et j'en arrive au même résultat, c'est la méthode qui fonctionne le mieux je trouve. Enfin en tout cas elle offre les meilleur résultat ^^

Dans ma page qui contient ma popup je fais

Chargement Navigateur de la page
bSourisSurPopup est un booléen = Faux; POPUP_Grades..Visible = Faux

ClickNavigateur de la page
SI POPUP_Grades..Visible = Vrai ET PAS bSourisSurPopup ALORS PopupFerme(POPUP_Grades)

Et dans la popup comme Michael je met à jour le booleen au survol de la popup et quand je ne la survolle pas et ça fonctionne très bien ^^
Message modifié, 22 janvier 2020 - 08:33
Membre enregistré
31 messages
Popularité : +2 (2 votes)
Posté le 22 janvier 2020 - 13:54
Bonjour,

Effectivement, c'est confondant de simplicité ! Encore fallait-il y penser...
Pourquoi faire compliqué quand on peut faire simple ?

Merci pour ce partage :merci:
Membre enregistré
324 messages
Popularité : +21 (51 votes)
Posté le 22 janvier 2020 - 15:46
On pense pas toujours au simple, on attaque un problème depuis un angle, mais souvent si on arrive depuis l'oppsé tout devient plus simple :D, en plus le poste est tombé à point nommé dans le forum, je devais justement le mettre en place ce matin dans un de mes projets ^^
Posté le 12 octobre 2020 - 18:09
Bonjour à tous,

J'ai également trouvé une solution au problème en jouant avec les axes X et Y.

Afin de faire disparaitre une popup lorsque l'on clique en dehors de celle-ci il "suffit" de vérifier lors de l’évènement clic (navigateur) de la page ou se trouve la popup si on se trouve ou non à l’intérieur de la popup.

Voici mon code :
nX1 est un entier = POPUP_MENU..X
nX2 est un entier = POPUP_MENU..X + POPUP_MENU..Largeur

nY1 est un entier = POPUP_MENU..Y
nY2 est un entier = POPUP_MENU..Y + POPUP_MENU..Hauteur

nXposSouris est un entier = SourisPosX(spPage)
nYposSouris est un entier = SourisPosY(spPage)

bFermerPopup est un booléen = Vrai

SI (nXposSouris >= nX1 ET nXposSouris <= nX2) ET (nYposSouris >= nY1 ET nYposSouris <= nY2) ALORS
bFermerPopup = Faux
FIN

SI bFermerPopup ALORS
PopupFerme(POPUP_MENU)
FIN


Vous pouvez aussi déclarer ce code dans une procédure navigateur avec le nom de la popup en paramètre. Ainsi si vous avez plusieurs popup dans une même page il suffit d'appeler la procédure et de donner le nom de la popup en paramètre.

Voilà j'espère avoir pu aider.

Bon développement à tous
Membre enregistré
948 messages
Popularité : +30 (92 votes)
Posté le 18 octobre 2020 - 16:41
Coucou,

Nouveauté Webdev 26


Posté le 30 janvier 2021 - 07:10
Salut,

Pour ceux qui cherchent encore une solution à ce problème voici une autre alternative, c'est un peu du bricolage mais ça fonctionne !

Grosso modo cela consiste à mettre un overlay transparent (mais bien présent) entre votre zone de contenu du site et la fenêtre pop up, en jouant avec les propriétés z-index du CSS. Vous lui mettez un display none et lorsque votre pop up apparait hop display block dessus.

Ensuite en jQuery vous allez détecter le click sur l'overlay via son id et normalement si vous avez bien indexé les éléments l'overlay étant derrière le pop up seuls les click en dehors de la fenêtre vont être détectés avec l'event click de l'overlay,

Ensuite vous repassez simplement le pop up et l'overlay en display none lors du click et voilà tout disparait ! Le tour est joué ;)
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 30 janvier 2021 - 15:16
Bonjour Nick,
Avez-vous testé votre solution ?
cela consiste à mettre un overlay transparent (mais bien présent) entre votre zone de contenu du site et la fenêtre pop up

Il me semble bien que l'affichage de la popup entraine celui d'un overlay également, qui va se superposer à la zone de contenu.
C'est ce qui s'appel le GFI dans le vocabulaire PC-SOFT.
Si j'ai bien tout compris, bon courage pour insérer une quelconque balise entre la zone de contenu et la popup ! ;)

--
René MALKA
Posté le 30 janvier 2021 - 17:52
Bonjour René,

Oui je l'ai évidemment testé et ça fonctionne :) J'ai dû utiliser cette solution dans ce contexte : Lors du clic sur un élément d'une liste, je souhaitais que mon pop up s'ouvre et que l'on puisse le fermer soit grâce à un bouton croix soit en cliquant à l'extérieur,

Le problème que je rencontrais c'est qu'avec la méthode closest de jquery par exemple avec l'event target en dehors de la fenêtre, a chaque fois que je cliquais sur un élément en dehors du pop up (que le pop up soit ouvert ou non) et bien ça me détectait mon clic en dehors donc aussitôt mes comportements css en display none s'activaient et la fenêtre n'apparaissait jamais...

Je ne doute pas qu'il puisse y avoir une méthode en JS plus propre mais en tous cas la méthode du double overlay fonctionne bien dans mon cas,

En gros au clic sur mon item de liste j'affiche l'overlay qui contient ma fenêtre pop up, le background est transparent et laisse donc passer mon 2eme overlay (qui lui est grisé et qui se trouvent dans une balise html différente de l'overlay de la pop up) et prend aussi toute la page en dessous du pop up, du coup dès qu'un clic est fait dessus je peux donc lancer mes comportements 👍

Tout ça en 1 ligne d'html, 2 de css pour les z index et quelques lignes de JS/jquery pour l'event
Membre enregistré
265 messages
Popularité : +14 (16 votes)
Posté le 30 janvier 2021 - 20:50
C'est plus parlant avec les explications de contexte ! :)
Intéressant, merci du tuyau Nick.
A regarder de prêt le cas échant, et encore plus avec l'évolution en version 26 relevé par Charly CANDO ;)

Bon dev !

--
René MALKA
Membre enregistré
14 messages
Posté le 05 janvier 2023 - 00:56
Bonjour,

Solution simple avec Webdev27, mettre un bouton invisible à l'extérieur, et fermer la popup quand on clique dessus ;)

Bon dev et je serais ravis de voir le projet que vous avez fait :)
Message modifié, 05 janvier 2023 - 00:58
Membre enregistré
15 messages
Popularité : +1 (1 vote)
Posté le 05 janvier 2023 - 11:21
Bonjour,

PopupAffiche(Popup_Info,popupAnnulable) fait cela très bien.

--
Christian