Recherche plugin pour déplacer la boite de dialogue

Résolu
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 - 1 oct. 2022 à 11:50
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 - 2 oct. 2022 à 21:19

Bonjour a tous

sur ce site j'avais vu un plugin génial mais que je ne retrouve plus 

lorsque je fermais la boite de dialogue on voyait la boite de dialogue partir vers le coin supérieur de l'écran

c'était sur cette page 

https://jqueryui.com/dialog/#animated 

cela fait plusieurs jours que je recherche un exemple , mais impossible a trouver ...

Merci de l'aide

A voir également:

2 réponses

jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478
1 oct. 2022 à 18:28

Bonjour,

En jquery ui, il existe plusieurs effets ..

Par exemple : 

https://jqueryui.com/effect/


.
Cordialement,
Jordane

1
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173
Modifié le 1 oct. 2022 à 18:42

bonjour Jordane 

Merci pour la reponse

oui je les ai tous essaye mais aucun ne fais ce que je désire

je suis toujours occupe a vouloir ajouté des fonctionnalité a mon bon de commande  (en continuant a apprendre )

lorsque on choisit un article j'ai un pop up qui s'affiche et je souhaiterais que lorsque je ferme ce pop up 

qu'il puisse se diriger vers le haut de mon écran en diminuant de taille pour disparaître complétement une fois qu'il atteins le coin supérieur droit de ma fenêtre 

et j'ai justement vu sur le site de jquery il y a quelques mois ce module enfin je pense ...

Mais je ne parviens plus a mettre la main dessus 

Et je ne trouve aucun exemple ...

1
jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478 > flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023
1 oct. 2022 à 19:34

En fait, le lien que je t'ai donné, donne des exemples .. à toi de jouer avec en modifiant les éventuels paramètres.

Tu peux aussi trouver des exemples sur internet, par exemple des choses du genre ( en jouant avec la méthode "animate" et en ajoutant un peu de css dynamiquement à ton objet

.fadeIn()
.css({top:1000,position:'absolute'})
.animate({top:275}, 800, function() {
    //callback
});
1
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173 > jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023
Modifié le 2 oct. 2022 à 20:23

bonjour jordane 

Merci pour la reponse

j'ai fini par trouver ce que je voulais 

Mais je reste bloquer sur un petit détail

pour l'instant je n'ai rien trouver de mieux que lorsque je clic sur ajouter un produit

qu'un pop up s'ouvre avec la quantité a ajouter au panier et en même temps j'ai mon effet qui se produit avec cette class "b-items__item__add-to-cart"

j'essaye donc de retarder le onclick de 2 secondes lorsque je clic sur ajouter au panier 

Mais cela ne fonctionne pas mes 2 secondes d'attende ne sont pas prise en compte

c'est embêtant car les deux effets se produise en même temps le onclick et ma class

 <a style="cursor: pointer; margin-bottom: 5px;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" 		 onclick="setTimeout(ouvreMaJolieAlert(event), 2000);">
														
																					</a>
1
Gotomogo > flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023
1 oct. 2022 à 19:35

Salut,

 ce n'est pas un pop up(un autre onglet/fenêtre de navigation) ou alors vous ne pourrez pas faire cela avec JavaScript puisque JavaScript ne fonctionne que dans une seule page à la fois.

" je souhaiterais que lorsque je ferme ce pop up " donc détecter le clic de la fermeture de la fenêtre modale.

"qu'il puisse se diriger vers le haut de mon écran en diminuant de taille pour disparaître complétement une fois qu'il atteins le coin supérieur droit de ma fenêtre "

Et quel est le problème? Ce n'est qu'une simple animation que vous pouvez décomposer en plusieurs étapes(décomposer une tâche complexe en ses tâches plus simples):

Cela implique détecter la position du haut de l'écran et la position verticale de la fenêtre modale. Changer progressivement(une animation) la coordonnée y pour se rapprocher du haut(0).

Diminuer la taille = de combien? Même chose que précédemment mais en jouant sur la longueur et largeur.

"atteindre le coin supérieur droit de ma fenêtre " = calculer la position horizontalement pour se rapprocher du bord droit de l'écran comme vous l'avez fait sur la 1ère étape pour la position verticale.

Plusieurs façons de faire des animations vous pouvez regarder déjà du côté de CSS qui propose un paquet de possibilités.

Avec JavaScript vous pouvez avoir plus de contrôles et possibilités en utilisant des variables sur les propriétés et faire du pas à pas(ce qui me semble pas nécessaire dans votre cas pour une animation aussi simple).  A vous de voir.

Avec la bibliothéque JQUery vous avez a méthode .animate

https://api.jquery.com/animate/

Pour comprendre le principe et apprendre à faire par vous-même je ne conseille pas de passer par JQuery mais plutôt décrire votre propre code JavaScript pour l'animation.

Notez que utiliser CSS n'exclut pas (au contraire) de pouvoir utiliser JavaScript, ne serais ce que pour déclencher l'animation CSS lors d'un clic, chainer différentes animations pour en faire une plus complexe, avoir des paramètres qui peuvent varier sur les proportions distances, durées...etc

Pour faire grandir votre savoir:

https://duckduckgo.com/?q=animation+CSS

https://duckduckgo.com/?q=animation+javascript

1
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173 > Gotomogo
2 oct. 2022 à 19:15

bonjour 

Merci pour les explications et les liens 

en cherchant encore et encore je suis tombe sur l'exemple que je voulais grâce aux exemples de codepen a présent il faut que je parvienne a l'intégrer comme je le désire 

0
flexi2202 Messages postés 3749 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 27 janvier 2023 173
2 oct. 2022 à 21:19

voila j'ai fini par trouver

 <a style="cursor: pointer; margin-bottom: 5px;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" 		 onclick="setTimeout(() => ouvreMaJolieAlert(event), 2000);">
														     
														     	ajouter au panier
														
																			</a>
1