Bug sur ma fenêtre mandal jquery

Résolu

ivan -
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention - 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

5 réponses

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bonjour,

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

ivan

bonjour, il n’y a pas d'erreur ;)
0
ivan

up ;)
0
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
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....
0

ivan

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

Réponse 2 / 5
ivan

up merci de votre aide
0
Réponse 3 / 5
ivan

plus personne ne sais comment faire une mandal là ca ne fonctione pas ;)
0
Réponse 4 / 5
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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)
0
1. ivan
  
  excusez-moi mais je t'ai mis une capture d'écran et je t'ai dit pas d'érreur
  
  0
2. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Sauf que ta captures n'affiches rien du tout... même pas les console.log .... as tu cliqué sur le bouton censé ouvrir la modal avant de faire la capture au moins ?
  
  0
3. ivan
  
  il ne mets pas d'érreur après cliquer
  
  0
4. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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é
  
  0
5. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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.
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
ivan
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
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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.
  
  0
2. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  mais bon, ta question initiale étant résolue, merci de suivre ce lien :
  https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/
  
  0

Bug sur ma fenêtre mandal jquery

5 réponses

Discussions similaires

Newsletters