[Article] Créez une fenêtre modale avec CSS et jQuery [Résolu]

[metis15]

Bonjour,
je ne connais pas grand chose au codage.
Je cherche la possibilité de régler la vitesse du fade dans les 2 sens...
J'ai bien vu dans mes recherche sur le Net qu'on peut introduire un slow quelque part, mais je n'ai pas compris comment.

Une piste ? Merci pour les aides à venir...

[Bovino]

Il suffit de lire la doc de .fadeIn() et .fadeOut().

[metis15]

Envoyé par Bovino

Il suffit de lire la doc de .fadeIn() et .fadeOut().

Oui, d'accord, mais je dois attaquer dans le jquery-1.6.4.min.js...?
Ca va être un carnage !!! (vu mon niveau en codage)

Surtout que dans ce fichier, il n'y a que :

Code :

fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}

Ca doit pas être là... ?

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

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

[autorepair911]

Bonjour,
tout est fonctionnel, mais le Pop Up ne s'affiche qu'une seule fois.

Quelqu'un a une idée, merci !!

Code :

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
47
48
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script language="javascript">
		$(document).ready(function() {
//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
 
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('');
 
	//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(''); //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
$('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;
});
		});
 
    </script>

[sofpower]

Bonjour,

J'ai inséré un formulaire dans la fenêtre modale mais au click sur le bouton submit, celle-ci se ferme automatiquement...

Y aurait-il un moyen de bloquer cette fermeture automatique?

Merci d'avance

[The_Miagiste]

Bonjour,

J'aimerais intégrer le code dans l'action de ma form "formulaire.php"

je m'explique j'ai un formulaire avec un script de validation pour chaque champs.

Quand j'ajoute le script au boutton submit de mon formulaire, la fenètre modal s'affiche avant d'effectuer le traitement (validation + envoie), d'ou la raison de vouloir ecrire le code dans mon fichier formulaire.php (je ne sais s'il y a d'autres solutions pour n'afficher la fenetre qu'après l'exécution du script de validation et l'envoie du formulaire)


Je vous remercie d'avance pour votre aide !!

[le_chomeur]

Bonjour , votre script de validation doit renvoyer true ou false pour indiquer si les champs de formulaire sont correctement remplit ?

si oui :

Code :

1
2
3
4
 
if(testdeschampsFonction()){
ouvrirPopup();
}

[nomads2a]

+1
La fenêtre est magnifique !! J'aimerai beaucoup la lancer aussi au chargement de la page , avec une condition php if , mais ça ...

J'aimerai tromper le script pour qu'il traite directement rel + width , pour le width , pas de problème , mais j'arrive pas pour le rel !!

QQ1 aurait il une idée soit pour simuler un click avec les attribut nécessaire a la fenetre ?? ou la lancer directement ??

merci

[le_chomeur]

Code :

var rel =  $('#iddulien').attr('rel');

[hx2508]

Très bien ce tuto, pourtant il manque au moins une info...
Traducttion signifie autre langue...
Mes sites sont multilangues, et donc le contenu est dynamique, puisque la valeurs des variables est en fonction de la langue du visiteur !
Depuis deux semaine je cherche comment passer par des variables pour la rédaction du contenu de la popin.
par exemple le contenu de la div

Code :

1
2
3
4
5
<div id="popup1" class="popup_block">
 	<?php echo $tpop1[$num]  ?>	
	<?php echo $cpop1[$num]  ?>
	<?php echo $cpop2[$num]  ?>
</div>

Comment signifier la valeur de $num ?
Ou bien comment récupérer ces valeurs directement dans la base de données, telles sont les deux questions dont je n'ai encore pas trouvé de réponse...
Si quelqu'un peut m'aider, je lui en serais gré...

Dans les pistes, j'ai compris que l'on peut passer des argument ainsi :

Code :

<a href="#?w=500" rel="popup1" argument ="test variable" class="poplight" onclick="blabla");  >

et ajouter une variable dans la fonction :

Code :

var popArgument = $(this).attr('argument'); //Ajout d'un argument

Je bloque sur la façon de relier une valeur de variable au contenu de la div de référence pour le contenu de la popin !
Merci de votre aide
Claude

[mickael49300]

bonjour et bravo pour se tuto sa fonctionne très bien en html mais mon problème comment faire pour l’ouvrir via un bouton en flash en action script 2 ? car mon site est en full flash

[snypi]

edit : souci résolue
comme je voulais ma popup dès le chargement de celle ci et j'avais un problème de clic dans la fenêtre modal
alors je suis partit sur du plus simple

par contre on doit dans le css mettre une largeur à la fenêtre modale ainsi que joué avec les pourcentage pour le centrage

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div class="voile-noir">
<div id="popup_name" class="popup_block">
  <object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/b0fo-Uqx2xk?version=3&amp;hl=fr_FR&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b0fo-Uqx2xk?version=3&amp;hl=fr_FR&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object><div style="float:right"><h1>Nouvelle page</h1>
  <p>Le contenu de cette page reste a saisir...</p>
  <p><a href="un_lien.html"><u>Renseignements et r&eacute;servations.</u></a>  <br /></p></div>
    <center>
    <input type="submit" value="SKIP" class="close" />
    </center>
<script type="text/javascript">
 
$(document).ready(function() {
  //Fermeture de la pop-up et du fond
$('.close').live('click', function() { //Au clic sur le bouton ou sur le calque...
  $('.voile-noir ').fadeOut(function() {
    $('.voile-noir,.popup_block').remove();  //...ils disparaissent ensemble
  });
  return false;
});
});
</script> 
 <a href="#" class="close">close</a>
</div> </div>

[Astral God]

Bonjour à tous.

Le seul problème que je rencontre est le scroll; en effet, ma fenêtre modal n'est pas scrollable et le scroll à la souris fait scroller la page en arrière plan.

Résultat: le contenu de la fenêtre est coupé, alors que l'on devrait (selon moi) voir la partie haute et pouvoir scroller ensuite.

Comment corriger cela ?

Merci.

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

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

[skybuck]

meme question pour l'ouverture automatique du pop up
est ce que la solution exposé dans le message precedent est la seul ?


merci

[skybuck]

et 2eme probleme

Code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

entre en conflit avec un script jquery deja en place sur ma page

que puisje faire?

merci