11485 sujets

JavaScript, DOM et API Web HTML5

Répétition impossible

Bonjour à tous,

Je developpe un version en responsive des mes boutiques et pour cela j'ai besoin d'avoir un popup qui s'ouvre lors de l'ajout d'un produit sur un portable.

J'ai developpé le code suivant cependant il m'est impossible de réitérer l'opération.
J'aurais tendance à penser que pour celà j'ai besoin de supprimer les élément créés (framePopUp', inPopUp) mais impossible.

Voici mon code:

$('#shopping_cart_title').addClass( "maincolor" );
					 if ($( window ).width() <=980){
											
						 var nom = "produit ajouté";
						 var valeur ="popup";
						 var largeur = 200;
						 var hauteur=200;
						$('body').append('<div id="framePopUp"></div><div id="inPopUp"></div>');
						$('#inPopUp').css({'width':largeur+'px','height':hauteur+'px','marginTop':'-'+hauteur/2+'px','marginLeft':'-'+largeur/2+'px'});
						
						var MonPanier= $('.ajax_cart_quantity').html();
						$('#inPopUp').html('<p>Produit ajouté avec succès</p><p></p><p><a href="http://www.example.tld/commande" class="typo_perso">Commander</a></p>');

						$('#framePopUp').css({'opacity':0.5});
						$('#framePopUp').fadeIn(1500).delay(3500).fadeOut(1500);
						$('#inPopUp').show().delay(5000).fadeOut(1500);
						
						 $('body').remove('#framePopUp');
						 $('body').remove('#inPopUp');
					}



#framePopUp {
    background-color:black;
    /*display: none;*/
    height: 1300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#inPopUp {
    /*display: none;*/
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 100;
	background-color:white;
	text-align: center;
	border: 1px solid #473022;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	font-size: 1.2em
}
#inPopUp > p:first-child { 
	padding-top: 40px;
}
#inPopUp > p:first-child +p {
		display: inline-block;
		height: 40px;
		width: 40px; 
		border:none;
		background:url(../img/check.jpg) no-repeat 0px 0px transparent;
}
#inPopUp a { font-size: 2em;}
html > body #inPopUp {
    position: fixed;
}


Auriez vous une idée? J'ai ajouté 

$('body').remove('#framePopUp');
$('body').remove('#inPopUp');


mais les éléments ne sont pas supprimés?
Salut, si tu essaies ceci à la place:


$('#framePopUp, #inPopUp').remove();

Est-ce mieux?

Vu que tu as des ids, autant les matcher directement (peu importe qu'il soit fils de telle ou telle classe ou balise dans ton cas). Il semblerait qu'en mettant l'id en paramètre de remove cela ne fonctionne pas (j'ai pas cherché à vrai dire et ça pourrait dépendre de la version de jquery aussi). Dans tous les cas, je pense que c'est plus propre et certainement plus rapide pour un id d'être défini dans le sélecteur en début comme ci-dessus.
Je te remercie j'avias aussi essayé mais sans succès.
Du coup j'ai contourné le problème.
Plutot que de le supprimé je ne le crée pas une seconde fois.

if (!$("#framePopUp").length){
							$('body').append('<div id="framePopUp"></div><div id="inPopUp"></div>');
						}

Merci
Sujet clos
Aller à