Menu

Bug sur ma fenêtre mandal jquery [Résolu]

- - Dernière réponse : jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
- 1 déc. 2018 à 17:46
Bonjour, j'ai re fait ma fenetre mondal mais la fenetre ne s'affiche pas quand je clique le boutton

voilà ,mon css:

#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}


quand je cliques sur ce bouton couleur ou smileys

<nav><ul><li><button type="button" class="poplight" data-idmodal="smileys" onclick="" id="global-messagerie-texterea-smileys">s</li><li><button type="button" class="poplight" data-idmodal="couleur" onclick=""  id="global-messagerie-texterea-couleur">c</button></li></ul></nav>


et normalement ca devrait affiché


<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>	  


au cas ou voilà ma pas mondal.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;
});



je ne comprend pas pour quoi ca n'affiche pas

normalement quand je cliques sur couleur ca affiche une fenêtre avec couleur et si je clique sur smileys ca devrait affiche la fenêtre smileys

merci

Afficher la suite 

Votre réponse

5 réponses

Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
0
Merci
Bonjour,

As tu regardé dans la console de ton navigateur si il n'y avait pas des erreurs ??

bonjour, il n’y a pas d'erreur ;)
jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Est-ce qu'au moins ton
console.log("ID de la popop = "+popID); // j'ai changer ID de la popop par le nom

s'affiche dans la console et correspond bien à l'ID de ta modale ??

De plus, une capture écran de ta console serait pas mal je pense....
merci de ta réponse , j'ai changer un id car ca ne correspondait pas

donc j'ai mis

html des bouttons


<nav><ul><li><button type="button" class="global-messagerie-texterea-couleur poplight" data-idmodal="couleurs" onclick="" id="couleurs">c</button></li><li><button type="button" class="global-messagerie-texterea-smileys poplight" data-idmodal="smileys" onclick="" id="smileys">s</button></li></ul></nav>


donc là si on clique sur couleur ou smileys normalement il devrait afficher ces fenêtre soit couleur ou smileyca et pas en même temps ;)

<div id="couleurs" 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>   
<div id="smileys" class="popup_block">
 <h2 class="titrefenetrepoup">smileys</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à j'ais le css our cacher et réapparaitre le cadre fenetre mondal lors du cliques

#fade { /*--Masque opaque noir de fond--*/
 display: none; /*--masqué par défaut--*/
 background: #000;
 position: fixed; left: 0; top: 0;
 width: 100%; height: 100%;
 opacity: .80;
 z-index: 9999;
}
.popup_block{
 display: none; /*--masqué par défaut--*/
 background: #fff;
 padding: 20px;
 border: 20px solid #ddd;
 float: left;
 font-size: 1.2em;
 position: fixed;
 top: 50%; left: 50%;
 z-index: 99999;
 /*--Les différentes définitions de Box Shadow en CSS3--*/
 -webkit-box-shadow: 0px 0px 20px #000;
 -moz-box-shadow: 0px 0px 20px #000;
 box-shadow: 0px 0px 20px #000;
 /*--Coins arrondis en CSS3--*/
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
img.btn_close {
 float: right;
 margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}




et son jquery


<$('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;
});



et la capture

https://www.casimages.com/i/181115100952820305.png.html

il met pas d'erreur

merci de on aide
Commenter la réponse de jordane45
0
Merci
up merci de votre aide
Commenter la réponse de ivan
0
Merci
plus personne ne sais comment faire une mandal là ca ne fonctione pas ;)
Commenter la réponse de ivan
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
0
Merci
Bon.....

Une mandal c'est une giffle .... toi ce que tu veux faire.. c'est une MODALE

Quoi qu'il en soit, tu n'as pas répondu aux questions/remarques que je t'ai fait....
comme par exemple... les éventuels messages présents dans la console de ton navigateur.... ( ET nous fournir une capture écran de la dite console)


il ne mets pas d'érreur après cliquer
jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Qu'il ne mette pas d'erreur... pourquoi pas... mais vu le code que je t'ai donné... il devrait afficher des choses......

Donc :
1 - Nous montrer la TOTALITE de ton code (html/JS) en indiquant, si dans des fichiers différents, le nom et l'emplacement des fichiers en question.
2 - Nous mettre des captures écran AVANT / APRES avoir cliqué
jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
et pour les images... merci d'utiliser le bouton prévu à cet effet dans la fenêtre de discussion au lieu de les héberger sur des sites externes.
je ne peut pas mettre photo car je suis pas inscrit ;)

https://www.casimages.com/i/181130083645228103.png.html

voilà mon code

css

#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}


html
	  <!--début du texterea-->
	  <div id="global-messagerie-textarea-button">
	  
	  <div id="global-messagerie-texterea">
	  
	  <div id="global-messagerie-texterea-smileys-couleur">
	                                               <textarea name="global-textarea" id="global-texterea-messagerie" placeholder="pourquoi ne pas parler de ce qui vous plait chez pseudo"></textarea>
												   <nav><ul><li><button type="button" class="global-messagerie-texterea-couleur poplight" data-idmodal="couleurs" onclick="" id="couleurs">c</button></li><li><button type="button" class="global-messagerie-texterea-smileys poplight" data-idmodal="smileys" onclick="" id="smileys">s</button></li></ul></nav>
	  </div>
	  
	  </div>
	  <nav id="global-messagerie-button"><ul><li><button type="submit">envoier</button></li></ul></nav>
      </div>
	  <!--fin du texterea-->


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; 
});


bien entendu j'ai mis ce code pour faire appel à la fenetre


<div id="couleurs" 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>	  
<div id="smileys" class="popup_block">
	<h2 class="titrefenetrepoup">smileys</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>	  


et aussi jai mis en bas ou en haut de la page

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	  <script type="text/javascript" src="http://communautaire.legtux.org/V1/includes/jquery/mondal.js"></script>



mais ca n'affiche toujours pas la fenetre mandal

et il n'affiche pas d'erreur

merci
jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Qu'est-ce que tu n'as pas compris dans ma phrase :
1 - Nous montrer la TOTALITE de ton code (html/JS) en indiquant, si dans des fichiers différents, le nom et l'emplacement des fichiers en question.

????
Là tu me colles des bouts de code.... je ne sais pas dans quel(s) fichier(s) il(s) se trouve(nt)...
Ni comment il(s) est/sont agencé(s)
Bref.. je ne peux rien faire pour toi.
Donc soit tu fais un effort... soit je laisse tomber !
Commenter la réponse de jordane45
0
Merci
merci, j'ai trouvé enfin ceux qui ne va pas, lol donc là ca affiche bien

mais juste une dernière question à propos de ce code

<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>'


j'ai remplacé par

<nav><ul><li><button type="submit" class="close btn_close icon-suppprimer-mondal"></button></li></ul></nav>


j'aimerais quand je clique sur button c'est qu'on ferme la fenetre hors là ils ne le ferme pas

comment je peut lui dire de fermer cette fenêtre

merci
jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Bonjour,

La fermeture se fait via le bout de code que tu as oublié de copier...
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup_block').fadeOut(function() {
		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	});
	return false;
});



ou celui la
//Close Popups and Fade Layer
	$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //...ils disparaissent ensemble


Codes qu'il faut adapter car actuellement ils se basent sur la balise <a class="close"

Sachant que vu que tu t'es mis à faire des fenêtres modal... autant éviter de faire des formulaire avec des submit....
Autant passer à l'ajax.
jordane45
Messages postés
23602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
mais bon, ta question initiale étant résolue, merci de suivre ce lien :
https://www.commentcamarche.com/faq/11365-marquer-un-fil-de-discussion-comme-etant-resolu
Commenter la réponse de ivan