Sujet Précédent Sujet Suivant

Mondale ne s'ouvre pas

Résolu/Fermé
arthur - 3 mars 2019 à 23:03
 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

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675
3 mars 2019 à 23:31
Bonjour
Comme je te l'ai indiqué en novembre ....
https://forums.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 ??
0
Réponse 2 / 6
arthur
4 mars 2019 à 00:17
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
0
Réponse 3 / 6
arthur
4 mars 2019 à 00:40
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 ;)
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675
4 mars 2019 à 08:44
Pour le bouton de fermeture.... avais tu regardé ma réponse de novembre concernant le bout de code manquant ???
0
arthur
4 mars 2019 à 13:19
maiqs ca n'a pas fonctioner et après j'ai un peut abondonner ;)
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675 > arthur
4 mars 2019 à 13:20
Montres ton code js complet
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675 > jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024
4 mars 2019 à 13:57
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à !
0
arthur
4 mars 2019 à 16:17
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
0
Réponse 4 / 6
arthur
5 mars 2019 à 13:37
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 ;)
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675
5 mars 2019 à 15:12

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


Je te repose les mêmes questions :
- 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 ??



2/ mon code js j'ai mis en bas de la page mais j'aimerais le mettre en haut de la page.

As tu lu ma précédente réponse à cette question ????
Et si tu insistes.. tu peux toujours placer ton code dans un document ready afin qu'il ne s'initialise que lorsque la page sera chargée..
0
arthur > jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024
5 mars 2019 à 16:56
console il m'indique :) 

Failed to load resource: the server responded with a status of 404 (Not Found)
modale.js:6 ID de la popop = global-annonce-smileys
modale.js:19 Uncaught TypeError: $(...).live is not a function
    at HTMLButtonElement.<anonymous> (modale.js:19)
    at HTMLButtonElement.dispatch (jquery-3.3.1.js:5183)
    at HTMLButtonElement.elemData.handle (jquery-3.3.1.js:4991)
previsualiser.js:26 Uncaught TypeError: Cannot read property 'substr' of undefined
    at HTMLLIElement.<anonymous> (previsualiser.js:26)
    at HTMLLIElement.dispatch (jquery-3.3.1.js:5183)
    at HTMLLIElement.elemData.handle (jquery-3.3.1.js:4991)
style.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)


la ligne 19 de la pge modale et non mondale ;;) 


$('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;
});
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675
5 mars 2019 à 19:23
Compare bien avec la source d'origine :
https://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/
0
arthur > jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024
5 mars 2019 à 22:58
je sais, mais ca ne marche pas 

$('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;
});
0
arthur
5 mars 2019 à 23:06
pour ifo, c'est toujours la même erreur de la consol
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675
6 mars 2019 à 23:24 
<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>

0
arthur
7 mars 2019 à 01:30
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
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675 > arthur
7 mars 2019 à 07:13
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.
0
Réponse 6 / 6
arthur
7 mars 2019 à 11:34
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
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675
7 mars 2019 à 14:25
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......... )
0
arthur
7 mars 2019 à 16:06
c'est bon c, ca fonctione , mais bon je ne suis pas convainqu ;)
0
jordane45 Messages postés 38201 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2024 4 675 > arthur
7 mars 2019 à 16:10
Tu peux donc mettre ce sujet en résolu.
En cas de nouvelle question , merci d'ouvrir une nouvelle discussion.
0
arthur
7 mars 2019 à 20:49
je ferais après car là impossible de mettre résolu ;)
0

Discussions similaires

Google Chrome ne s'ouvre plus
Boogle -
Destrio5 -

5 réponses
H.P Smart ne demarre plus
c.meunier -
epango -

8 réponses
Nvidia control panel ne se lance pas
jmpower -
Kiilla -

11 réponses
n'arrive pas à ouvrir mon messenger
titoun972 -
Simon -

2 réponses
[Sujet groupé] Yahoo Mail ne veut plus s'ouvrir
RIBELLU -
Jasmin86 -

68 réponses