Un pop up [Résolu]

Réponse 1 / 12

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
Modifié par dugenou le 19/05/2016 à 12:43

Bonjour,

Tu peux utiliser ce script, à placer dans la partie <body> de ta page :

<script type="text/javascript">// <![CDATA[
function couleurs(){
win=window.open("couleurs.html","","toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=1024,height=750")
win.moveTo(screen.width/2-500,screen.height/2-300)
}
// ]]></script>

Ensuite, tu places le lien vers cette fenêtre de cette manière :

<a title="Palette de couleurs" onclick="couleurs()" href="javascript:;">Palette de couleurs</a>

Tu crées une page, couleurs.html, dans laquelle tu mets ta palette de couleurs et un bouton pour la fermeture :

<input type="button" value="Fermer" onClick="self.close()" name="button" class="bouton_submit">

Il faut adapter les dimensions et la position, en modifiant le code.
window.open("dimensions de la fenêtre")
win.moveTo("position sur la page")

Tu peux voir, le résultat, sur mon site personnel, pour les liens dans le texte "mon CMS personnel" ou "petit CMS".

Courage, le bout du tunnel n'est pas loin, il suffit de se retourner.

Réponse 2 / 12

mathieu
19 mai 2016 à 13:43

merci mais comment on peut supprimer le haut du cadre

afin doner cette pettite fenetre

http://hpics.li/e4fc951

merci

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
19 mai 2016 à 13:52

Regarde le code source de la page en question et utilise la même méthode.

Réponse 3 / 12

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 13:58

Bonjour,

Ce que tu cherches à faire .. c'est une fenêtre MODALE et non un POPUP.
Tu peux donc te baser sur ce tutoriel en "pur" javascript :
https://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

Ou utiliser des plugins prêts à l'emploie via la librairie javascript JQUERY :
https://www.sitepoint.com/14-jquery-modal-dialog-boxes/

mathieu
19 mai 2016 à 15:33

merci ca marche

juste une question

<a href="#?w=500" rel="popup_name" class="poplight">En savoir plus</a>

j'aimeris le mettre

<button type="submit" onclick="#?w=500" onfocus="popup_name" class="poplight">couleur</button>

mais il ne fonctionne pas

merci

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652 > mathieu
19 mai 2016 à 15:58

Humm.. tu ne peux pas.
en tout cas.. pas directement.....

Il faut modifier le code javascript pour permettre son utilisation autrement que via un lien <a href ....
et retirer le "submit" de ton bouton et le remplacer par "button"

<button type="button"  class="poplight">couleur</button>

Et le code JS pour ouvrir la modal devient :

$('button.poplight').click(function() {
	//------------------------------------//
  //Variables à définir
  //------------------------------------//
  var popID = "id_de_la_div_modale"; // à modifier par l'ID de la DIV de ta modal
  var popWidth = "200"; // Largeur de la modal à définir

  
  //------------------------------------//
  // Affichage de la modale
  //------------------------------------//
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;

	//On affecte le margin
	$('#' + popID).css({
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});

	//Effet fade-in du fond opaque
	$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

	return false;
});

Bien entendu .. tu as inclus la librairie JQUERY à ta page ?

Et en cas de soucis.. penses à utiliser les outils de debug de ton navigateur (touche F12) .. et de préférence, penses à installer le plugin FIREBUG pour FireFox.

Réponse 4 / 12

mathieu
19 mai 2016 à 16:31

merci de ton aide

en fait je met en bas de la page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../../includes/js/miseenforme.js"></script>

ensuite sur la page miseenforme.js

$(document).ready(function() {



$('button.poplight').click(function() {
	//------------------------------------//
  //Variables à définir
  //------------------------------------//
  var popID = "id_de_la_div_modale"; // à modifier par l'ID de la DIV de ta modal
  var popWidth = "200"; // Largeur de la modal à définir

  
  //------------------------------------//
  // Affichage de la modale
  //------------------------------------//
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;

	//On affecte le margin
	$('#' + popID).css({
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});

	//Effet fade-in du fond opaque
	$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

	return false;
});


});

ensuite sur la page

<button type="button"  class="poplight">couleur</button>

en bas de la page je met le cadre de la fenêtre

<div id="popup_name" class="popup_block">
	<h2 class="titreouiborderbas">Developpez.com</h2>
	<p>Soh Tanaka est traduit sur developpez.com.</p>
</div>

et quand je regarde sur firefox il met cette ereur

http://www.hostingpics.net/viewer.php?id=794251erreur.png

merci

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 16:34

Déjà ... tu as utilisé (comme dans l'exemple ...mais c'est par ce qu'il date un peu...) jquery 1.4
Je t'invite à TELECHARGER le fichier JQUERY 1.12
https://code.jquery.com/jquery-1.12.3.min.js
et à l'inclure dans ton site directement au lieu de prendre celui qui se situe sur le net...

Ensuite.. pour ce qui est de l'image .. merci d'utiliser la balise IMAGE du site au lieu de mettre ton fichier sur un autre site...là je n'y ai pas accès depuis mon taff.

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 16:36

Pense également à MODIFIER LES VARIABLES DU SCRIPT pour être CONFORME à ce que tu utilises
Toi tu as laissé :

  var popID = "id_de_la_div_modale"; // à modifier par l'ID de la DIV de ta modal

Hors.. l'id de ta DIV c'est :

 id="popup_name"

Réponse 5 / 12

mathieu
19 mai 2016 à 16:43

merci

si tu peut regarder ceux qu'il faut garder et supprimer car là j'ai plein de script

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="../../includes/js/masquer.js"></script>
<script type="text/javascript" src="../../includes/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../../includes/js/select.js"></script>
<script type="text/javascript" src="../../includes/js/prew.js"></script>
<script type="text/javascript" src="../../includes/js/container.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../../includes/js/miseenforme.js"></script>

et pour l'image je ne peut pas car il faut s'inscrit ;)

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 16:49

Oula......
Tu as mis combien de jquery différents ?????
C'est pas le tout de copier/coller du code... il faut comprendre ce que ça fait et comment on s'en sert !!!!!!!!

Bref...
Déjà, Remplace :

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

par le fichier .js que tu auras téléchargé sur le lien que je t'ai donné précédement ....

<script type="text/javascript" src="../../includes/js/jquery-1.12.3.min.js"></script>

Puis ne conserve QUE les autres lignes suivantes:

<script type="text/javascript" src="../../includes/js/masquer.js"></script>
<script type="text/javascript" src="../../includes/js/select.js"></script>
<script type="text/javascript" src="../../includes/js/prew.js"></script>
<script type="text/javascript" src="../../includes/js/container.js"></script>
<script type="text/javascript" src="../../includes/js/miseenforme.js"></script>

Réponse 6 / 12

mathieu
19 mai 2016 à 16:52

c'est bon ca marche

là je vais t'expliquer l'(erreur de firefox
il me dit sur ce code

<div id="popup_name" class="popup_block">
	<h2 class="titreouiborderbas">Developpez.com</h2>
	<p>Soh Tanaka est traduit sur developpez.com.</p>
</div>

stray start tag "div"
et

cannot recover after last error. any further errors will be ignored

merci et après c'est bon

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 16:59

Quel est le code COMPLET de ta page ?
Ou as tu placé ce code (celui de ta div....) .... AVANT le </body> j'espère.............

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 17:12

Vu que tu as mis la question en "RESOLU" .. je suppose que je suis tombé juste.
Le fait de me le confirmer ... ou un"merci" n'aurait pas été superflu .... (même si je le principale.. c'est que ça soit ok pour toi... )
Bonne soirée.

mathieu
19 mai 2016 à 17:22

oui j'ai cliquer sans faire exprès

sinon c résolu mais j'ai peut être une question

il faut que je réfléchit en testant un peut

je te tiendrais au courant ce soir ou demain

merci

Réponse 7 / 12

mathieu
19 mai 2016 à 20:44

bonsoir

j'ai mis 2 boutons juste tester

<button type="button" class="poplight">couleur</button><button type="button" class="poplight1">smileys</button>

donc quand je clique sur couleur là c'est bon il m'ouvre bien la fenêtre de couleur

et si je clique sur smileys il n'ouvre pas la bonne fenetre

j'ai mis sur js

  var popID = "couleur, smileys"; // à modifier par l'ID de la DIV de ta modal

et biern sur

j'ai changer

<div id="smileys" class="popup_block">
et
<div id="couleur" class="popup_block">

etc...

quand je clique sur le bouton couleur : il m’envoie bien la fenêtre couleur

qd je clique sur bouton smileys il n'ouvre pas la fenêtre smileys

pas d'éreur a communique sur firefox

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
19 mai 2016 à 23:03

Oula... où as tu vu que tu pouvais mettre DEUX ID dans une seule variable :

var popID = "couleur, smileys";

Si tu veux que ta fonction d'ouverture de modal puisse fonctionner pour plusieurs modale... il y a plusieurs choses à changer.....

Déjà .. au lieu de mettre l'ID de la popup à ouvrir en dur dans la fonction.... on va la passer par un autre moyen..
Les data attributes par exemple.

Donc sur tes boutons tu vas devoir faire un truc du genre :

<button type="button"  data-idmodal="id_de_la_mdodal_a_ouvrir"  class="poplight">couleur</button>

- en adaptant la valeur de id_de_la_mdodal_a_ouvrir en fonction des tes besoins...

Puis dans le code JS :

var popID = $(this).data('idmodal'); //retourne la valeur de l'attribut data-idmodal de l'élément cliqué

Au cas où, tu peux regarder si l'id est bien trouvé en ajoutant en dessous un petit :

console.log("popID="+popID);

Cela s'affichera dans la CONSOLE du navigateur.

mathieu
19 mai 2016 à 23:49

merci, ca marche

je met résolus en esperant que ca ne buguera pas

Réponse 8 / 12

mathieu
26 mai 2016 à 00:56

bonjour excuse moi de revenir

j'ai juste une petite question sur ce code

$('button.poplight').click(function() {
	//------------------------------------//
  //Variables à définir
  //------------------------------------//
var popID = $(this).data('idmodal'); //retourne la valeur de l'attribut data-idmodal de l'élément cliqué
var popWidth = "400"; // Largeur de la modal à définir

  
  //------------------------------------//
  // Affichage de la modale
  //------------------------------------//
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;

	//On affecte le margin
	$('#' + popID).css({
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});

	//Effet fade-in du fond opaque
	$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

	return false;
});

on vas dire il y a une class poplight

j'ai voulu ajouter juste pour tester

$('button.poplight.buttons').click(function() {

il ne comprends pas qu'il y a 2 class

pour t'expliquer

la class poplight ca sera un rond
la class buttons ca sera un caré

merci de m'expliquer coment mettre 2 class differents

merci

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
Modifié par jordane45 le 26/05/2016 à 01:24

Bonsoir
Pourquoi vouloir mettre deux class différentes ?
Ce n'est pas parce-que ton objet contient deux class.. qu'il faut les marquer dans le code permettant d'ouvrir la popup....
Que ton bouton ait la class rond ou carré ... dans les deux cas tu utiliseras UNIQUEMENT le code suivant :

$('button.poplight').click(function() {

mathieu
26 mai 2016 à 10:32

merci de ta réponse
je n'ai pas trouvé la solution

je vais revoir ca et je te dirais ou ca coince

Réponse 9 / 12

mathieu
26 mai 2016 à 12:10

je revien car là je coince soit j'ai mal fait ou pas

dopnc

si je met ce boutton

<button type="submit" class="buttons" data-idmodal="tableau" onclick="javascript:bbcode('<secret>', '</secret>','');return(false)" title="Tableau"><span class="icon-miseenformetableau" title="Tableau"></span></button>

avec la class buttons qui est sous forme carré là ca fonctionne il m'ouvre bien la fenêtre avec titre tableau

sur une autre page je met ce même boutton

<button type="submit" class="poplight" data-idmodal="couleur" onclick="javascript:bbcode('<secret>', '</secret>','');return(false)" title="couleur"></button>

avec une class poplight qui est sous forme d'un rond

là il n'ouvre pas la fenetre

c'est pour ca que je vien de posté pour dire bug qd je met 2 class diferent

merci

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
26 mai 2016 à 12:13

Tu peux mettre DEUX CLASS dans le HTML

<button type="submit" class="poplight buttons" data-idmodal="couleur" onclick="javascript:bbcode('<secret>', '</secret>','');return(false)" title="couleur"></button>

Mais tu n'en ajoutes pas DANS LE JAVASCRIPT

$('button.poplight').click(function() {

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652 > jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024
26 mai 2016 à 12:14

Attention...
mettre un SUBMIT + un ONCLICK + L'ouveture d'une MODAL ensemble n'a pas de sens ....

mathieu
26 mai 2016 à 12:27

merci là cva fonctionne et pour temps javais mis hier et ca bug

mais là ca re fonctionne

merci là ca sera résolu

si un moment ca bug je ré ouvre le sujet pour te dire

mais je penses que ca sera bon

encore merci

Réponse 10 / 12

mathieu
26 mai 2016 à 13:06

encore moi car je ne trouve pas le petit bug

j'ai mis 2 boutons simple

<button type="submit" class="buttons poplight" data-idmodal="couleur" onclick="" title="couleur"></button>

<button type="submit" class="buttons poplight" data-idmodal="smileys" onclick="" title="smileys"><span class="icon-smileywink1" title=""></span></button>

la page fenetre couleur

<div id="couleur" class="popup_block">
	<h2 class="titrefenetrepoup">couleur</h2>
	  <div class="codecouleur noir"></div>
	  <div class="codecouleur bleu"></div>
	  <div class="codecouleur bleufonce"></div>
	  <div class="codecouleur marron"></div>
	  <div class="codecouleur gris"></div>
	  <div class="codecouleur grisfonce"></div>
	  <div class="codecouleur grisclair"></div>
	  <div class="codecouleur or"></div>
	  <div class="codecouleur rouge"></div>
	  <div class="codecouleur vertfonce"></div>
	  <div class="codecouleur vert"></div>
	  <div class="codecouleur rose"></div>
	  <div class="codecouleur argent"></div>
	  <div class="codecouleur jaune"></div>
	  <div class="codecouleur fushia"></div>
	  <div class="codecouleur olive"></div>
	  <div class="codecouleur azur"></div>
	  <div class="codecouleur orange"></div>
	  <div class="codecouleur marine"></div>
	  <div class="codecouleur turquoise"></div>
	
</div>

là c'est bon ca m'ouvre bien la fenetre couleur

et quand je clique sur lautre boutton smileys

il n'ouvre pas la fenetre

voilà ma page

<div id="smileys" class="popup_block">
	<h2 class="titrefenetrepoup">smileys</h2>
	  <span class="icon-smileywink1" title=""></span>
	
</div>

pas d'ereur sur fixfox donc la je ne vois pas ou ca cloche

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
26 mai 2016 à 13:21

Fais moi plaisir ....
change le

type="submit"

par

type="button"

... le submit n'est pas adapté à ton besoin.

Et dans le JS, ajoute sous la variable popID la ligne de code

console.log("ID de la popop = "+popID);

Histoire de voir dans la console du navigateur si il cible bien le bon id et si il rentre bien dans la fonction.

mathieu
26 mai 2016 à 13:32

merci donc j'ai changer le type
type submit c'est pour les bouton directe sur la page
et le type button c'est pour ouvrir une fenêtre car on ne valide pas

es ce que c'est bien ça ?

sinon j'ai rajouté le code en sous de la variable

il ne fonctionne toujours pas et il ne met pas d'erreur

merci

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652 > mathieu
26 mai 2016 à 14:45

Tu peux me montrer le code COMPLET ?

Réponse 11 / 12

mathieu
26 mai 2016 à 15:09

j'entrain de faire un truc pour voir ou ca bug mais je ne trouve pas

la page js

$('button.poplight').click(function() {
	//------------------------------------//
  //Variables à définir
  //------------------------------------//
var popID = $(this).data('idmodal'); //retourne la valeur de l'attribut data-idmodal de l'élément cliqué
console.log("ID de la popop = "+popID); // j'ai changer ID de la popop par le nom
var popWidth = "400"; // Largeur de la modal à définir

  
  //------------------------------------//
  // Affichage de la modale
  //------------------------------------//
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;

	//On affecte le margin
	$('#' + popID).css({
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});

	//Effet fade-in du fond opaque
	$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

	return false;
});


<button type="button" class="buttons poplight" data-idmodal="couleur" onclick="" title="couleur"></button>

<button type="button" class="buttons poplight" data-idmodal="smileys" onclick="" title="smileys"><span class="icon-smileywink1" title=""></span></button>

<button type="button" class="buttons" data-idmodal="tableau" onclick="" title="Tableau"><span class="icon-miseenformetableau" title="Tableau"></span></button>

là je met 3 boutton par exemple

et mes pages pour afficher la fenêtre

fenetre du tableau

<div id="tableau" class="popup_block">
	<h2 class="titrefenetrepoup">Propriétés du tableau</h2>

	Lignes
	<input type="text" value="3" />
	
	Collonnes
	<input type="text" value="2" />
	Largeur
	<input type="text" value="500" />
	
	style de tableau
	
	
	Alignement
</div>

fenetre du smileys

<div id="smileys" class="popup_block">
	<h2 class="titrefenetrepoup">smileys</h2>
	  <span class="icon-smileywink1" title=""></span>
	
</div>

fenetre des coulleurs

<div id="couleur" class="popup_block">
	<h2 class="titrefenetrepoup">couleur</h2>
	  <div class="codecouleur noir"></div>
	  <div class="codecouleur bleu"></div>
	  <div class="codecouleur bleufonce"></div>
	  <div class="codecouleur marron"></div>
	  <div class="codecouleur gris"></div>
	  <div class="codecouleur grisfonce"></div>
	  <div class="codecouleur grisclair"></div>
	  <div class="codecouleur or"></div>
	  <div class="codecouleur rouge"></div>
	  <div class="codecouleur vertfonce"></div>
	  <div class="codecouleur vert"></div>
	  <div class="codecouleur rose"></div>
	  <div class="codecouleur argent"></div>
	  <div class="codecouleur jaune"></div>
	  <div class="codecouleur fushia"></div>
	  <div class="codecouleur olive"></div>
	  <div class="codecouleur azur"></div>
	  <div class="codecouleur orange"></div>
	  <div class="codecouleur marine"></div>
	  <div class="codecouleur turquoise"></div>
	
</div>

merci de ton aide

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
26 mai 2016 à 16:19

et avec ce code ... lorsque tu cliques sur un des boutons .. rien ne s'affiche dans l'onglet console de firebug ??

mathieu
26 mai 2016 à 16:30

là j'ai re tester
quand je clique sur le bouton couleur il m'ouvre bien la fenêtre couleur

et quand je clique sur les autres bouton il ne s'ouvre pas

et j'ai regarder sur Firefox il n' y a pas d'erreur

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652 > mathieu
26 mai 2016 à 16:32

Tu peux me faire un screenshot de la console après avoir cliqué sur l'un des autres boutons ?

Et il me faudrait .. le code COMPLET toute ta page HTML + le code JS qui va avec

mathieu
26 mai 2016 à 16:58

c'est bon ca l'aire de marcher sauf pour un je t'explique

là j'ai 2 boutons avec css rond

<button type="button" class="buttons poplight" data-idmodal="couleur" onclick="" title="couleur"></button>

<button type="button" class="buttons poplight" data-idmodal="smileys" onclick="" title="smileys"><span class="icon-smileywink1" title=""></span></button>

là tout est bo bon

maintenant ce boutton avec ces class ca marche ca fait un rond

      <button type="button" class="buttons poplight" data-idmodal="tableau" onclick="" title="tableau"></button>

moi j'aimerais ce bouton soit en carré

donc je supprimer la class poplight qui est le rond et garder juste la class buttons qui est carré

mais ca ne fonctione plus a part si je remet poplight mais le souci il est rond au lieux de metre le carré

merci

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652 > mathieu
26 mai 2016 à 18:04

je supprimer la class poplight qui est le rond

Ah non ! popplight est une class "fictive" utilisée pour appeller le script JS....
Je te l'explique une dernière fois ceci :

$('button.poplight').click(function() {

Ca signigie : Pour tous les éléments de type BOUTON (button en anglais) qui ont la class "popilight", lorsqu'on clique dessus.... lance la fonction ...

Je ne peux pas être plus clair ....

Réponse 12 / 12

mathieu
26 mai 2016 à 22:22

merci là ca fonctionne

mais j'ai juste une petite dernier question
là on s'est occupé que des boutton

si je met par exemple un span

<span class="icon-formulairesmileyspetitcommentaire poplight" title="smileys">

là il n'ouvre pas

et que je veux qu'on clique sur span et ca m'ouvre la fenetre

peut être il faut refaire le js ou juste ajouter span en haut du js

pour que ca puisse marché

mercii

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
26 mai 2016 à 23:52

Soit tu refais la fonction pour taper sur le span au lieu d'un Button...
Soit tu ne cibles aucun élémennt en particulier et dans ce cas tu retires simplement le button dans le js.
Comme ceci :

$('.poplight').click(function() {

Je t'invite fortement à lire la documentation de jquery : https://api.jquery.com/category/selectors/
ou encore https://openclassrooms.com/fr/courses/3504441-introduction-a-jquery?archived-source=1631636

mathieu
27 mai 2016 à 10:16

avant te lire la réponse j'ai trou trouver cette nuit

merci là tout fonctionne

merci de ton aide

Un pop up

12 réponses

Discussions similaires

Newsletters