Bug sur ma fenêtre mandal jquery

Résolu

ivan -
jordane45 Messages postés 38486 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

A voir également:

Bug sur ma fenêtre mandal jquery
Fenetre windows - Guide
Fenêtre hors écran windows 11 - Guide
Mcafee fenetre intempestive - Accueil - Piratage
Fenetre de navigation privée - Guide
Bug chromecast - Guide

5 réponses

Réponse 1 / 5

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

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

ivan

up ;)

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

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

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

Réponse 3 / 5

ivan

plus personne ne sais comment faire une mandal là ca ne fonctione pas ;)

Réponse 4 / 5

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

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)

ivan

excusez-moi mais je t'ai mis une capture d'écran et je t'ai dit pas d'érreur

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

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 ?

ivan

il ne mets pas d'érreur après cliquer

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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.

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

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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/

Discussions similaires

Iptv beug

Problème IPTV SMARTER

Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre

Bug de chaîne IPTV

J'ai un problème avec la géolocalisation Snapmap

Votre réponse

Discussions similaires