Mondale ne s'ouvre pas

Résolu

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

A voir également:

Mondale ne s'ouvre pas
Windows ne s'ouvre pas - Guide
Instagram ne s'ouvre plus - Forum Instagram
Chrome ne s'ouvre plus ✓ - Forum Virus
Nvidia control panel ne s'ouvre pas - Forum Carte graphique
Pourquoi marketplace s'ouvre sur une autre page ✓ - Forum Facebook

6 réponses

Réponse 1 / 6

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

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

Réponse 2 / 6

arthur

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

Réponse 3 / 6

arthur

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

Pour le bouton de fermeture.... avais tu regardé ma réponse de novembre concernant le bout de code manquant ???

arthur

maiqs ca n'a pas fonctioner et après j'ai un peut abondonner ;)

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

Montres ton code js complet

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

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

arthur

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

Réponse 4 / 6

arthur

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

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

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

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

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

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

Compare bien avec la source d'origine :
https://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/

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

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

arthur

pour ifo, c'est toujours la même erreur de la consol

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

Posez votre question

Réponse 5 / 6

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

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

arthur

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

Réponse 6 / 6

arthur

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

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

arthur

c'est bon c, ca fonctione , mais bon je ne suis pas convainqu ;)

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

Tu peux donc mettre ce sujet en résolu.
En cas de nouvelle question , merci d'ouvrir une nouvelle discussion.

arthur

je ferais après car là impossible de mettre résolu ;)

Discussions similaires

H.P Smart ne demarre plus

instagram ne veux plus s'ouvrir

Nvidia control panel ne se lance pas

Clavier ouvre raccourcis

Impossible d'ouvrir instagram

Votre réponse

Discussions similaires