Bug sur ma fenêtre mandal jquery

console.log("ID de la popop = "+popID); // j'ai changer ID de la popop par le nom

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

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

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

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

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