Menu

Changer largeur de la fenêtre modale [Résolu]

- - Dernière réponse :  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
Afficher la suite 

Votre réponse

1 réponse

Messages postés
25024
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mars 2019
1904
0
Merci
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

merci, je connait les selecteurs mais pas encore à 100%

j'ai déjà teenter avant de t'envoyer un message

ajouter une class

j'ai re tenter j'ai mis une class sur button fermer-modale

j'ai tenter ou j'avais tent avant


$('#fade, span#icon-supprimer-modale','#fade, button.fermer-modale').remove();

ou

$('#fade, span#icon-supprimer-modale',' button.fermer-modale').remove();

ou

$('#fade, span#icon-supprimer-modale','.fermer-modale').remove();

c n'a pas marché

pas d'érreur sur la console


je crois que je vais laisser tomber si la nuit porte conseil et si j'ai une petite lueur qui m'eclaire sur une idée

je te dit ;)

je t'en remerci
jordane45
Messages postés
25024
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mars 2019
1904 > arthur -
Le remove doit s'appliquer sur la modal.
La class de ton bouton.. doit servir à détecter le CLICK
Donc plutot
$('.taclass').click(function(){
   //ici le code pour fermer la modal
});
j'ai tenter de mettre ligne 1 4 6 la class fonction

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

});


s'il n met pas l'érreur dans la consoe, je ne peut pas trouver ou est l'erreur

je suis nul mais bon

il faut que je change de metier ;)
jordane45
Messages postés
25024
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mars 2019
1904 > arthur -
Y'a rien qui te choque
$('body').on('click', 'span#icon-supprimer-modale', function() { //Au clic sur le body...
$('.global-fermer-button ').click(function(){


le fait d'avoir un "onclick" qui contient lui même un "onclick" ... ????
C'est "inception" ton code...............

De toutes façons.. vu que c'est une "nouvelle" question (la question initiale étant au sujet de la taille de ta modale via le bouton que tu avais ajouté...)
je t'invite à :
- Créer une nouvelle discussion
- Y mettre le code COMPLET de ce que tu as actuellement.

Je t'invite également à sérieusement réfléchir à ce que doit faire ton code AVANT d'essayer de coder quoi que ce soit...
puis lorsque tu codes... à te relire plusieurs fois pour essayer de voir si tu n'a pas faire d'erreur.... (de code... ou de logique.... )
Quand à changer de métier... pourquoi pas... sinon tu peux toujours essayer de te former correctement en reprenant depuis le début... visiblement tu as voulu sauter un peu trop d'étapes d'un coup.... (il te manque la logique, la rigueur, les instructions de bases du langage, la compréhension des codes que tu écrits ........ )
tempiis ce n'est pas grave, je fermerais la fenêtre avec la croix merci
Commenter la réponse de jordane45