Menu

Mondale ne s'ouvre pas [Résolu]

- - Dernière réponse :  arthur - 7 mars 2019 à 20:49
Bonjour,

j'ai mis en html mes 2 boutons

<!--début des boutton du formulaire annonce-->
	  <nav id="global-annonce-button" class="formulaire-cliquer"><ul>
	  <li><button type="button" class="poplight" data-idmodal="couleurs" onclick="" id="couleurs">c</button></li>
	  <li><button type="button" class="poplight" data-idmodal="smileys" onclick="" id="smileys">s</button></li>
	  </ul></nav>	  
	  <!--fin des boutton du formulaire annonce-->


ensuite le 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;
}


et son code 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;
});


ensuite j'ai mis le code html en bas de la page afin de faire appelle la page mondale quand on clique sur smileysou couleur grace a son id


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


des que je cliques sur le boutton couleur ou le boutton smileys

je vois bien le fond noir de l'id de fade mais pas la fenetre avec id couleur ou id smileys

et j'ai bien mis en bas de la page, mais j'aimerais le mettre en haut de la page cete balise


<script src="http://mondsite.legtux.org/V1/includes/jquery/mondale.js"></script>

merci de votre aide







Configuration: Windows / Chrome 72.0.3626.119
Afficher la suite 

Votre réponse

6 réponses

Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884
0
Merci
Bonjour
Comme je te l'ai indiqué en novembre ....
https://www.commentcamarche.net/forum/affich-35693476-bug-sur-ma-fenetre-mandal-jquery

On dit MODALE... et non mandale ni mondale...

Ensuite... Mêmes questions qu'en novembre : que t'affiche la console ?
As tu essayé, comme je te l'avais fait la dernière fois de mettre des console.log pour essayer de voir le contenu de tes variables et si tu passes dans les différents if / block/ fonctions de ton code ??
Commenter la réponse de jordane45
0
Merci
j'ai refait le site autrement je penses c'est pour ca que ca re plante

la console m'indique

ID de la popop = smileys
Commenter la réponse de arthur
0
Merci
c'est bon je vient juste le trouver mon ereur c'est juste le id qui etait identique donc j'ai changer le id= global-couleur

et le id de la fentre mondale j'ai laisser id="couleur"

là c'est bon ca remarche ;)

juste une question ,

j'ai mis

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

afinde fermer la fenêtre, mais il ne se ferme pas ;)

a ton avis pour quoi ;)
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > arthur -
Montres ton code js complet
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
-
sachant que tu dois placer, dans le code de ta modal, le bout de code
//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;
});


enfin bon... suffit de prendre le code que tu as utilisé à l'origine.... tout y est déjà !
je remets un peut d'ordre dans les pages et je testerais pour voir si ca marche. ;)

une question là le scripts , je suis obliger de le mettre en bas de la page, coment je doit modifier le code du mondale afin que le script soit en haut de la page

merci
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > arthur -
Pour la dixième fois... on dit MODALE pas mondale ... il n'y a pas de N !!!!!

Ensuite, pourquoi vouloir le mettre "en haut" ??
La norme actuelle est de placer au maximum ses scripts JS et CSS en BAS de page avant le </body>
je te montrerais le code des que je remet la page d'ici ce soir ou demain ;)
Commenter la réponse de arthur
0
Merci
bonjour juste 2 petite question

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('<span class="icon-supprimer-modale"></span>');
//Fermeture de la pop-up et du fond
$('span.icon-supprimer-modale, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup_block').fadeOut(function() {
		$('#fade, span.icon-supprimer-modale').remove();  //...ils disparaissent ensemble
	});
	return false;
});

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


1/ quand je clique sur icon-supprimer-modale, il ne veut pas se fermer ;)

2/ mon code js j'ai mis en bas de la page mais j'aimerais le mettre en haut de la page.
si je met mon code js en haut , il ne fonctionne pas mais si je mets en bas , là il fonctionne
qu'elle es le petit code qui permet de mettre le script en haut de la page et non n bas de la page

merci de ta super patient ;)
pour ifo, c'est toujours la même erreur de la consol
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > arthur -
As tu tout lu ?
Je ne pense pas.... le chapitre parlant de la mise à jour est le plus important....
https://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/#LVII-B
j'ai bien mis en haut de la page

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

mais s'il faut ajouter cete ligne , je veux bien
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
mais ca ne change pas grand chose


mon code modifier

jQuery(function($){
    
    $('button#icon-button-annonce-smileys, button#icon-button-annonce-couleur').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('<span class="icon-supprimer-modale"></span>');

 //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
$('span.icon-supprimer-modale, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
 $('#fade , .popup_block').fadeOut(function() {
  $('#fade, span.icon-supprimer-modale').remove();  //...ils disparaissent ensemble
 });
 return false;
});

});


il ne veux plus m'ouvrir la fenetre

   <li><button type="button" id="icon-button-annonce-smileys" data-idmodal="global-annonce-smileys"></button></li>

   <li><button type="button" id="icon-button-annonce-couleur" data-idmodal="global-annonce-couleur"></button></li>


erreur

at HTMLDocument.<anonymous> (modale.js:40)

merci
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > arthur -
Faut croire que tu ne sais lire qu'en diagonale ........
Si tu avais correctement tout lu... je pense que ton code ne contiendrait plus de .live( ... )
j'ai supprimer live :)

je repete quand je mets ce code :

jQuery(function($){
				
				
				
				$('button#icon-button-annonce-smileys').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;
	});
	
	
	//Close Popups and Fade Layer
	$('body').on('click', 'span.icon-supprimer-modale, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, span.icon-supprimer-modale').remove();  
	}); //...ils disparaissent ensemble
		
		return false;
	});

	
});



ma fenêtre modale ne veut pas s'ouvrir depuis que jai re modifier ce bout de code

//Close Popups and Fade Layer
	$('body').on('click', 'span.icon-supprimer-modale, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, span.icon-supprimer-modale').remove();  
	}); //...ils disparaissent ensemble
		
		return false;
	});


depuis que j'ai rajouté jQuery(function($){

et j'ai bien mis le code en haut de la page ;)
Commenter la réponse de arthur
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884
0
Merci
<html>
<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <style>
  #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;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script type="text/javascript">
jQuery(function($){
							
				
	$('.btn-global-annonce').click(function() {
      //------------------------------------//
      //Variables à définir
      //------------------------------------//
      var popID = $(this).data('idmodal'); //retourne la valeur de l'attribut data-idmodal de l'élément cliqué
      var popWidth = "400"; // Largeur de la modal à définir

      console.log("ID de la popop = "+popID); // j'ai changer ID de la popop par le nom
      
      //------------------------------------//
      // 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>');

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

	
});
</script>

</head>
<body>
<!--début des boutton du formulaire annonce-->
	  <nav id="global-annonce-button" class="formulaire-cliquer">
    <ul>
	  <li><button type="button" id="icon-button-annonce-smileys" data-idmodal="global-annonce-smileys" class="btn-global-annonce">SMILEY</button></li>

   <li><button type="button" id="icon-button-annonce-couleur" data-idmodal="global-annonce-couleurs" class="btn-global-annonce">COULEURS</button></li>

	  </ul></nav>	  
	  <!--fin des boutton du formulaire annonce-->
  

<div id="global-annonce-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="global-annonce-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>   





</body>
</html>

merci ca fonctionne juste un petit detail

ta mis une class qd tu cliques sur le bouton couleur et smileys

es-ce que c'est possible de modifier class par id

come celà

	  <li><button type="button" id="icon-btn-global-smileys-annonce" data-idmodal="global-annonce-smileys"></button></li>
	  <li><button type="button" class="icon-button-gras"></button></li>
	  <li><button type="button" class="icon-button-souligner"></button></li>
	  <li><button type="button" class="icon-button-italique"></button></li>
	  <li><button type="button" class="icon-button-barre"></button></li>
	  <li><button type="button" id="icon-btn-global-couleur-annonce" data-idmodal="global-annonce-couleurs"></button></li>


et pour le jquery

$('#icon-btn-global-smileys-annonce, #icon-btn-global-couleur-annonce').click(function()



par ce que si je clique sur ta class

class="btn-global-annonce">

il met dans le textarea annonce

c'est pour ca que je voulais savoir si c'st possible de mettre id au lieu class pour le modale

ne me demande pas pk id et class

a part que j'ai mis en sorte qd je cliques sur le boutton
<button type="button" class="icon-button-gras"></button>


ddans le textarea, il le met

c'est pour ca si tu peux remplacer

class="btn-global-annonce">

par ce code
#icon-btn-global-smileys-annonce, #icon-btn-global-couleur-annonce



si c'est possible
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > arthur -
Heuuu.... En français ça donne quoi ?

Je pense vaguement avoir compris... Et donc.... Rien ne t'empêche d'avoir un id ET une class sur un même élément...
Tu peux donc le rajouter si tu le souhaites.
Commenter la réponse de jordane45
0
Merci
je vais t'expliquer clairement, car j'ai ciblé l'érreur

je souhaite mettre

$('#icon-button-annonce-smileys, #icon-button-annonce-couleur').click(function() 


avec

<li><button type="button" id="icon-button-annonce-smileys" data-idmodal="global-annonce-smileys">SMILEY</button></li>

   <li><button type="button" id="icon-button-annonce-couleur" data-idmodal="global-annonce-couleurs" class="btn-global-annonce">COULEURS</button></li></li>


là tu vois

2 boutton smileys et couleur

j'ai fait expres de suprimer class="btn-global-annonce" sur le boutton smiley

et je laisse class="btn-global-annonce" sur le boutton couleur.


si je clique sur le boutton smiley, la fenetre ne s'ouvre pas.
si je clique syr le boutton couleur la fenetre s'ouvre

je penses que c'est à cause de la class="btn-global-annonce"


si je laisse la class="btn-global-annonce"

il met dans le textarea la balise <annonce></annonce

car j'ai mis dans la page prev

 $('.formulaire-cliquer button, .formulaire-cliquer li')
  .click(function(){
   var style,class_=$(this).attr("class");
 
   /*on ne prend que le dernier mot après le dernier "-" trouvé dans la classe 
   du bouton, si par exemple on a cliqué sur le bouton .icon.button-gras, on ne prend que "gras" et
                        on le stocke dans le variable style */
 
                        style=class_.substr(class_.lastIndexOf('-')+1);
 
   /* le 3éme paramètre de la fonction insertTag doit être le id du textarea ==> global-textarea-annonce*/
   insertTag("<"+style+">","</"+style+">","annonce-textarea");
   });//fin click


c'est pour ca , je souhaite supprimer la class dans les boutton ou je souhaite afficher une mondale

quand il n'y aura pas de modale


quand je clique sur ce bouton gras

<button type="button" class="icon-button-gras"></button>


il mettra la balise dans le textarea

<gras></gras>


c'est juste pour ca je veux supprimer la class dans le boutton ou je veux une mondale

mais si je supprime la class dans mondale , il ne veux pas m'ouvrir la fenêtre.

pour quoi quand je supprime la class , la fenêtre ne veux pas ouvrir


c'est juste ca qui m'intrigue lol


et ensuite j'ai une petite question à propos de la fermeture de la fenêtre

quand je veux fermer la fenêtre , je veux quand on est obliger d clique sur


<span class="icon-supprimer-modale"></span>


actuellement, si je clique hors du cadre de la fenêtre mondale, la fenêtre se ferme

coment, je doit lui dire pour fermer la fenêtre vous êtes obliger de clique sur la croix sur la balise span et non hors du cadre


       //Close Popups and Fade Layer
      $('body').on('click', 'span.icon-supprimer-modale, #fade', function() { //Au clic sur le body...
        $('#fade , .popup_block').fadeOut(function() {
          $('#fade, span.icon-supprimer-modale').remove();  
      }); //...ils disparaissent ensemble


es-ce que je dois supprimer '#fade afin d'eviter de suprimer hors du cadre


merci
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 -
Tu cherches à comprendre un peu ce que fait (et comment...) le code...... ou tu ne fais que copier/coller des trucs au pif en espérant que ça marche ??????

Car :

si je clique sur le boutton smiley, la fenetre ne s'ouvre pas.
si je clique syr le boutton couleur la fenetre s'ouvre

Tu as bien entendu... modifié la ligne qui fait l'appel à l'ouverture de la modal...
à savoir
$('.btn-global-annonce').click(function() {


Pour ce qui est de ta seconde question...... cibler TOUS les boutons de ta page n'est pas une bonne idée....
$('.formulaire-cliquer button, .formulaire-cliquer li')


Il faut cibler les boutons sur lesquels tu veux que ton code s'applique ... en utilisant, par exemple, une class justement....

Et pour savoir quoi mettre dans le textarea.. au lieu d'utiliser la class.. pour le coup.. j'utiliserai des data attributes.... (c'est un peu à ça que ça sert justement..... )

En gros...
- Les ID et les CLASS servent à IDENTIFIER les éléments
- les data attributes.. à transmettre des informations complémentaires.

Ne pas comprendre ça est plus que gênant ......

Pour la dernière question.... ben... si tu comprends comment fonctionne jquery et les "SELECTEURS" de jquery (qui sont les même qu'en CSS au passage........ ) tu devrais être en mesure de voir comment faire pour que la fenêtre ne se ferme pas lorsque tu cliques en dehors de la modale ( un indice.... quand tu cliques "en dehors..." en réalité tu cliques sur l'élément qui fait le fond noir......... )
c'est bon c, ca fonctione , mais bon je ne suis pas convainqu ;)
jordane45
Messages postés
24852
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
7 mars 2019
1884 > arthur -
Tu peux donc mettre ce sujet en résolu.
En cas de nouvelle question , merci d'ouvrir une nouvelle discussion.
je ferais après car là impossible de mettre résolu ;)
Commenter la réponse de arthur