Changer largeur de la fenêtre modale

Résolu/Fermé
arthur - 17 mars 2019 à 14:11
 arthur - 20 mars 2019 à 15:07
Bonjour,

grâce à jordan qui m'a aidé à faire une modale

j'ai un buttons

<button type="button" data-idmodal="global-annonce-smileys-modale" data-role="smiley" class="global-ouverture-modale icon-button-smileys"></button>


voilà le code

$(function(){
$('.global-ouverture-modale').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 = "530"; // 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('<span id="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;
  });//fin clic sur .global-ouverture-modale
 
  //Close Popups and Fade Layer
  $('body').on('click', 'span#icon-supprimer-modale', function() { //Au clic sur le body...
        $('#fade , .popup_block').fadeOut(function() {
          $('#fade, span#icon-supprimer-modale').remove();  
      }); //...ils disparaissent ensemble
 
        return false;
   });//fin clic sur span#icon-supprimer-modale
 
});//fin de $(function) ou document.ready



je souhaite remplacer la ligne 7

par


//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
$('a.poplight[href^=#]').click(function() {
	var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
	var popURL = $(this).attr('href'); //Retrouver la largeur dans le href

	//Récupérer les variables depuis le lien
	var query= popURL.split('?');
	var dim= query[1].split('&');
	var popWidth = dim[0].split('=')[1]; //La première valeur du lien



pour le buttons

<button type="button" data-idmodal="global-annonce-smileys-modale" data-role="smiley" class="global-ouverture-modale icon-button-smileys" onclick="#?w=500"></button>

voilà la démo

<a href="#?w=500" rel="popup_name" class="poplight">En savoir plus</a>

https://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/#LV

si quelqu'un peut me faire car je n'ai pas envie de me tromper lol


Configuration: Windows / Chrome 72.0.3626.121
A voir également:

1 réponse

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 mars 2019 à 14:20
Bonjour,

Déjà.. moi c'est JordanE (avec un E donc..)

Ensuite... le onclick de ton bouton est une bétise
onclick="#?w=500"


A la place... utilise un data attribute
<button type="button" data-idmodal="global-annonce-smileys-modale" data-role="smiley" class="global-ouverture-modale icon-button-smileys" data-width="500"></button>

Et donc pour récupérer la largeur de la modal dans le code js
var popWidth = $(this).data('width'); //La première valeur du lien

0
merci, mais il ne s'ouvre plus ;) enfin la fenêtre ;)
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > arthur
17 mars 2019 à 22:55
Montre ton code modifié
Montre nous les messages de la console
0
modale.js:9 Uncaught ReferenceError: popID is not defined
    at HTMLButtonElement.<anonymous> (modale.js:9)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)


      //Variables à définir
      //------------------------------------//
      var popWidth = $(this).data('width'); //La première valeur du lien
      var popWidth = "530"; // Largeur de la modal à définir
 
      console.log("ID de la popop = "+popID); // j'ai changer ID de la popop par le nom





j'ai tenter de supprimer

var popWidth = "530"; // Largeur de la modal à définir

mais ca n'a rien fait j'ai remis c'etait juste pour teste au cas ou


là les valeur sont en, px, es-ce que c'est possible de mettre en em

il y a 5 jours, j'ai tenter de mettre une class pour changer directement le css sur ma feuille mais il n' a pas pris en compte






<button type="button" data-idmodal="global-annonce-smileys-modale" data-role="smiley" class="global-ouverture-modale icon-button-smileys" data-width="500"></button>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
18 mars 2019 à 08:24
Le message dans la console t'indique clairement qu'il ne parvient pas à trouver la variable popID.....
0
dépuis que tu m'as dit de changer popWidth c'est ca qui bug :)
0