Vous êtes + de 30 000 à nous suivre sur Twitter, merci ! Une enceinte Bose Soundlink Mini II à gagner sur notre compte, c'est par ici !

Wordpress Help popup bouton

Posté par adagio le 03/04/2016 à 20h49

Wordpress Help popup bouton

Le 03/04/2016 à 20h49

Bonjour , J'ai besoin d'une aide pour wordpress , j'ai installé un joli thème où il y a un bouton .
On peut configurer deux choses :
- le texte du bouton
- le link
Mon idée est de faire sortir un popup en appuyant sur ce bouton à l'image du bouton Mode d'emploi sur http://www.airbnb.fr .
Quelqun peut me donner un coup de pouce ?
Merci

10 commentaires

NOUVELLE REPONSE

Nombre de réponses par page

Ce paramètre s’applique automatiquement à l’ensemble des sujets.

Flux RSS des réponses

xdeneux

Le 03/04/2016 à 21h42

#2 Signaler
Alors pour te donner plus d'info, techniquement c'est pas une popup ça, c'est plutôt une tooltip.
Popup = nouvelle fenetre genre les publicités à la con qu'on avait avant
Popin / Modale = fenetre dans la même page (on a ça parfois sur des formulaires de connexion intégrés ou lors de la consultation d'images)

Tu trouveras peut-être plus d'infos en cherchant donc avec ce terme!
thib3113

Le 03/04/2016 à 23h54

#4 Signaler
Hum, le bouton mode d'emploi m'ouvre un conteneur en haut ... pas un tooltip ...

exemple de modal :
http://getbootstrap.com/javascript/#live-demo

Exemple de tooltip :
http://getbootstrap.com/javascript/#four-directions

Tu as ensuite les alertes : http://www.toutjavascript.com/reference/reference.php?ref=alert (clique sur cliquez moi)
avec ses variantes, la confirm : http://www.toutjavascript.com/reference/reference.php?ref=confirm&parent=6
et la prompt : http://www.toutjavascript.com/reference/reference.php?ref=prompt&parent=6
et enfin le popup : http://www.toutjavascript.com/reference/reference.php?ref=open

Tu veux quoi exactement ?
adagio

Le 04/04/2016 à 20h29 (Modifié le 04/04/2016 à 20h32)

#5 Signaler
waw merci pour ces infos Thib3113 ? En fait ce qui serez cool c'est d'avoir le Modal (launch demo modal ) . Sais tu comment l'integrer à mon site wordpress ?
J'ai mis les lignes suivantes et jai que laffichage du bouton (rien ne se passe quand je clique dessus) je pense qu'il me manque une librairie à integrer pour reconnaitre le modal etc ...mas je ne sais pas laquelle :

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Kyojin

Le 04/04/2016 à 23h36

#6 Signaler
Le lien de @thib3113 était juste un exemple visuel. Tu ne peux pas l'utiliser en tant que tel parce qu'il faut - comme tu l'as deviné - une bibliothèque externe qui s'appelle Bootstrap.

Si tu veux des trucs clé-en-main pour WordPress, regarde du côté des plugins :

https://wordpress.org/plugins/pop-up/
https://wordpress.org/plugins/popup-builder/
https://wordpress.org/plugins/modal-dialog/
oOKaMiZuKOo

Le 05/04/2016 à 3h18 (Modifié le 05/04/2016 à 3h37)

#7 Signaler
Le bouton "mode d'emploi" fait juste apparaître un block caché (display:none) #div_memploi (qui contient le texte à faire apparaître) au onclick event (du button).
+ un scrollTop: $("#div_memploi").offset().top inclu dans un $('html, body').animate({scrollTop},Le_Temps voulu);

Sous Wordpress, JQuery est déjà intégré, je ne vois pas l'utilité de rajouter une surcouche bootstrap pour faire cela.... en plus selon le thème, on peut reprendre le css (correspondant au type d'alerte voulu - font - bgcolor) du block div pour faire plus propre....

En gros :

1. Click sur bouton
2. Faire apparaître la div cachée avec une animation de temps définie
3. Scroller automatiquement la page vers le haut de la balise de la div


.... bon en gros .... c'est un peu la base ça :|

Plus d'info sur les js perso :
> http://codex.wordpress.org/Using_Javascript

Au boulot ! |D
TeSdY14

Le 05/04/2016 à 5h11

#8 Signaler
Mon voisin du dessus à me semble t il assez bien résumé le problème, sauf que, je ne dirais pas que cela est la base :D
et que le display n'est pas 'none' mais, avec un peu de poudre au yeux on peux parvenir au même résultat
la position de base de l’élément qui apparait est :
élément {
top: -663px; // Position de départ
}
et quand il apparait
élément {
top: 0; // position au clique pour le voir apparaitre
}

cela me fait penser au 'Collapse' de Bootstrap

Sinon je t'invite à utiliser, quand tu trouves sur un site des éléments qui te plaisent, l'inspecteur de ton navigateur internet qui te donnera un début de piste sur les éléments que tu pourrais vouloir récupérer.
Aussi à lire les documentations des différents modules ou outils que tu utilises, normalement tu devrais avoir des informations sur ce que tu peux faire avec.

thib3113

Le 05/04/2016 à 10h20

#9 Signaler
Je pense que avant de proposer tout pleins de solutions technique, il faudrait d'abord connaitre les compétences de @adagio non ?

Vous lui proposez du js, ou du CSS ... sauf que dans son énoncé, il parle juste de configuration dans wordpress ...

Dit nous ce que tu sais adagio, et nous pourrons t'aider :).

qu'est ce que tu gère dans :
- wordpress
- html
- CSS
- JavaScript
- worpdress child theme ?
thib3113

Le 05/04/2016 à 12h12

#10 Signaler
je ne fais pas ma véxée |D => MP :)

Laisser une réponse

Des champs obligatoires n’ont pas été remplis, ou l’ont été incorrectement.