Discussion :

[papy86000]

Bien le bonjour, d'abord merci pour ce tuto qui est vraiment fort utile.

J'ai mis en place un tableau alimenté par une base de données.
J'aimerais que sur la sélection d'une cellule du tableau la modale s'ouvre et récupère les info de la cellule.

Malheureusement je n'y arrive pas.... Vu que ce n'est pas une nouvelle fenetre windows et donc pas de rechargement de page, je n'arrive pas a faire passer ma variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#?matri=<?php echo $donnees_messages['Nom'];?>" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">

Je pensais récupérer le "nom" puis via url, l'envoyer pour ensuite la récupérer en GET.

Le but etant quand meme de ne pas recharger la page :/
Donc une solution ? Ajax semble être le seul moyen non ?

[lorentdups]

Bonjour,

quant à moi j'aurais aimé que la pop-up s'ouvre à l'ouverture de ma page d'accueil pour donner des infos.
je suis en développement d'un niveau assez rare qui est en dessous de très nul... j'ai donc essayé de façon basique de remplacer "display:none" par "display:block" sauf que la popup apparait décallée et je perds la croix pour fermer, et je n'ai pas le fond opaque...

Bref, je suis perdu.

Merci de vos lumières !!

[vibish]

@lorentdups Essaye de remplacer la fonction "click" par "fadeIn"

[lvr]

Petite erreur:

Dans le tuto je lis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        //Effet fade-in du fond opaque
        $('body').append(''); //Ajout du fond opaque noir

Et le fond noir n'apparaît pas.

Dans le code utilisé dans mon browser (la source) le code est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        //Effet fade-in du fond opaque
        $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir

Et effectivement ça marche mieux...


Idem avec le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
                .prepend('');

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
       $('#' + popID).fadeIn().css({
            'width': Number(popWidth)
        })
                .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

[inoune]

Salut

Je rejoins lvr pour sa remarque sauf que quand je vérifie le site avec le validateur, ça m'indique 2 erreurs:

line 167 column 97 - Erreur: document type does not allow element "a" here
line 180 column 34 - Erreur: document type does not allow element "div" here

Je parle toujours du code source de la demo.

Et puis concernant la méthode live utilisée vers la fin du code js, ça ne marche pas avec la nouvelle version de jQuery. J'ai dû charger la même version utilisé dans le tuto, à savoir: jQuery-1.4.1

[Bovino]

Effectivement, le code jQuery de l'article n'est pas compatible avec les versions récentes de jQuery.
D'autre part, les code HTML était sémantiquement faux.

Une mise à jour de l'article a donc été faite passant l'exemple en HTML5 et rendant le code jQuery compatible avec les dernières versions.

[alex5513]

Bonjour à tous,
déjà merci pour ce tuto qui est super.

Alors moi j'ai mis un formulaire d'inscription dans ma fenêtre et j'aimerais savoir comment afficher les messages d'erreur des tests en javascript quand la personne remplie le formulaire. Je peux faire des alert() mais ce n'est pas très élégant, ça fait pop up sur pop up. j'aimerais savoir si c'est possible d'écrire dans la pop up.

Merci pour votre aide


edit: j'ai trouvé une solution : creer une <div id="erreur"> </div> avec rien dedans et dans la fonction javascript mettre document.getElementById('erreur').innerHTML = "Veuillez remplir correctement tous les champs *";

[yull27]

Bon, j'ai voulu utiliser plusieurs popup et commander la fermeture de la popup ouverte en ouvrant une nouvelle.

voici le bout de code à rajouter dans le jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//close pop up id
$('a.popclose').on('click', function() {
	var popID = $(this).data('close'); //Trouver la pop-up correspondante
	$('#' + popID).fadeOut();
	return false;
});

et rajouter data-close="id de la popup" dans le lien et
popclose dans la class class=" popclose poplight"

ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" data-width="450" data-rel="id popup2" data-close="id popup1" class="popclose poplight">mon texte</a>

Bon et voici le code jquery complet après qqles modifs et bugs d'affichage trouvés:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
jQuery(function($){
	//Lorsque vous cliquez sur un lien de la classe poplight
	$('a.poplight').on('click', function() {
		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
		var popWidth = $(this).data('width'); //Trouver la largeur
 
		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close'+popID+'"><img src="/scripts/jquery/popuplight/close_pop.png" class="btn_close"/></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;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
 
		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
	//Close Popups and Fade Layer
	$('body').on('click', 'a.close'+popID+', #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close'+popID+'').remove();  
	}); //...ils disparaissent ensemble
 
 
		return false;
	});
		return false;
	});
 
		//close pop up id
	$('a.popclose').on('click', function() {
		var popID = $(this).data('close');   //Trouver la pop-up correspondante
		$('#' + popID).fadeOut(function() {
			$('a.close'+popID+'').remove();  
	});
 
		return false;
	});
 
});

Allez, bizzzzzzzzzz! ^^

[lavm01]

Bonjour,

J'ai créé le popup et il apparaît bien dans ma fenêtre mais comment fait-on pour que l'usager clique sur le X pour fermer le popup car présentement si je clique n'importe ou dans la fenêtre (sauf dans le popup) le popup se ferme.

Merci de me réponsre.

[lvr]

Bonjour,

J'ai créé le popup et il apparaît bien dans ma fenêtre mais comment fait-on pour que l'usager clique sur le X pour fermer le popup car présentement si je clique n'importe ou dans la fenêtre (sauf dans le popup) le popup se ferme.

Merci de me réponsre.

C'est ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
//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;
});

Dans $('#fade , .popup_block').live('click', function(), le "#fade" dit que si l'utilisateur click sur le fond alors il doit faire le fadeOut puis la suppression du fond et de la popup.

[beegees]

Merci pour ce joli popup, je l'ai intégré à un de mes sites.

Question 1): est-il possible de mettre le bouton (croix) de fermeture au milieu de la popup (en la laissant à droite) au lieu d'en haut ?

Question 2) Est-il possible d'ajouter une barre de défilement ?

Merci d'avance pour l'aide.

bee

[evdog69]

Bonjour,

pardonnez moi de remonter ce post mais j'ai une question toute bête, y a t il un moyen de faire appel à cette fonction en php, j'aimerai l'utiliser pour confirmer une action après requete, je souhaiterai faire appel à cette fenêtre automatiquement via un code php mais je ne parviens pas à la traduire vu mon niveau très moyen en javascripts ?

merci d'avance

[speedylol]

voilà une réponse juste après un teste d'une adresse en php avec jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$motif_adresse ='/^[a-z- ]{5,80}$/i';
if(!preg_match($motif_adresse,$adresse))
{
	echo' <script>
    $(document).ready(function() {
    $("#dialog").dialog({ 
	minWidth: 400 ,
	height: 120,
	position: [400,250],                      
	buttons: { "Ok": function() { 
	history.go();
    return false; { $(this).dialog("close"); } } }
  	});	});
    </script>';
	echo'<div align="center" id="dialog" title="Erreur">Votre adresse est incorrect uniquement des lettres !!!!</div>';	
	include("cssstyle/bas.php");
	$add=0;	
	return FALSE;			 
    }
else{
	$adresse;
    }

[malyana]

Bonjour à toutes et à tous,

tout d'abord merci pour ce petit tuto qui est bien utile pour une débutante comme moi.
Tout fonctionne parfaitement mais je souhaiterais que la fenêtre se ferme seulement au clic sur l'image du bouton et non sur la fenêtre elle-même. J'ai bien vu ce message :"Si nous avions souhaité que seuls les clics sur les croix ferment les popups, alors nous aurions pu les encapsuler dans un élément commun et affecter la délégation sur cet élément." mais cela reste du chinois pour moi. Si une âme charitable voulait bien m'aider cela m'arrangerait beaucoup.
Je vous souhaite une bonne journée!
Ps: je suis restée sur la première version.