Fenêtre qui apparait et grise le fond

[absot]

Bonjour, je souhaiterais savoir quelle technologie utiliser pour que quand on clique sur un bouton par exemple, une fenêtre apparaît p(as une popup) et le fond est grisé, je pense que c'est du Jquery mais je ne suis pas sûr.

Voici un exemple de ce que je parle:

[Vil'Coyote]

javascript. Regarde vers des script lightbox (jquery) par exemple. cela devrait te convenir.

[absot]

Merci, je vais regarder mais on peut mettre ce que l'on veut dedans, pas forcément une image mais un formulaire par exemple?

[Vil'Coyote]

oui, perso j'utilise lightbox pour afficher des statistique, des tableaux de récap etc ....

[absot]

Ca devrait aller alors par contre j'ai un problème.

Tout se passe sur une seule page php mais j'ai deux slide Jquery.

Sur le premier slide Jquery, l'utilisateur remplie un formulaire, il le valide puis la page va sur le deuxième slide où il y a un tableau récapitulatif avec un rafraîchissement du deuxième slide avec une requête AJAX pour ne pas quitter la pagee (au début, le deuxième slide est vide).

Maintenant, nous sommes sur le deuxième slide et je voudrais que quand on clique sur une image, il y a ai une lightbox sauf que ça ne fonctionne pas, je me suis demandé pourquoi et j'ai remarqué en analysant le code HTML généré (Ctrl + U sous firefox) que mon deuxième slide est vide, ce qui me semble normal vu qu'au début il est vide, ce n'est qu'après qu'il se rafraîchit avec l'apparition du tableau donc du coup, il ne trouve pas d'images je pense..

Je ne sais pas si je me suis bien exprimé?

Comment est-ce que je peux procéder?

[Vil'Coyote]

en effet j'ai pas tout compris et c'est normal qu'en effectuant un ctrl+u tu ne puisse pas voir ton code. il faut effectuer une sélection avec la souris puis clic droit > afficher la source sélectionné

[absot]

J'ai une seule page PHP qui contient deux slides (j'utilise les slides jquery), le premier slide est un formulaire que l'utilisateur remplie puis une fois fini, il le valide.

Au moment où l'utilisateur valide le formulaire, on va sur le deuxième slide où le formulaire subit un traitement et renvoi un résultat sur celui-ci.

Dans ce deuxième slide, j'ai des images où je voudrais utiliser des lightbox mais ça ne fonctionne pas, quand j'essaies sur le premier slide, ca fonctionne mais pas sur le deuxième.

Je pense avoir trouvé pourquoi, au début du chargement de la page, l'utilisateur se trouve sur le premier slide donc c'est chargé et ça fonctionne mais pas le deuxième, il n'y a rien dedans au début pour qu'en regardant dans le code source généré, il n'y a rien dans le deuxième slide car quand je passe du premier au deuxième slide, je fais une requête AJAX pour traiter mon formulaire donc la page n'est pas rechargée.

Du coup, je suis bloqué pour mes lightbox dans mon deuxième slide, quand je clique sur mes images, au lieu de me faire une lightbox, ça m'emmène sur une nouvelle page avec l'image en question..

Est-ce que j'ai mieux expliqué?

Comment je peux faire?

Sous firefox: Ctrl + U = clic droit->Code source de la page

[Vil'Coyote]

Sous firefox: Ctrl + U = clic droit->Code source de la page

oui ça je sais sauf que je me répète, tu utilise de l'ajax donc ton ctrl+u ne marche que pour l'affichage de la page charger au départ. d'ou ma réponse une sélection avec clic droit > afficher code sélectionné. cela permet d'afficher le code généré même par de l'ajax.

pour ce qui est de ton souci je pense que cela peut provenir de l'insertion de jquery. ton 2eme slide ne doit pas avoir accès au code js de lightbox. Il faudrait peut ajout l'appel du scrip js de jquery/lightbox dans ton second formulaire.

[absot]

Envoyé par Vil'Coyote

oui ça je sais sauf que je me répète, tu utilise de l'ajax donc ton ctrl+u ne marche que pour l'affichage de la page charger au départ. d'ou ma réponse une sélection avec clic droit > afficher code sélectionné. cela permet d'afficher le code généré même par de l'ajax.

Je n'ai pas ça:

Envoyé par Vil'Coyote

pour ce qui est de ton souci je pense que cela peut provenir de l'insertion de jquery. ton 2eme slide ne doit pas avoir accès au code js de lightbox. Il faudrait peut-être ajouter l'appel du script js de jquery/lightbox dans ton second formulaire.

C'est à dire que dans mon second formulaire, je fais quelque chose comme:

Code :

1
2
3
4
5
6
7
8
9
10
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
        $('#image a').lightBox();
    });
</script>

Pas sûr d'avoir compris mais je ne pense pas que ça soit compliqué.

[Vil'Coyote]

oui je pense qu'il faudrait ajouter l'appel du script comme tu l'indiques.

[absot]

J'ai rajouté dans mon deuxième formulaire (celui qui est mis à jour avec une requête AJAX) mais ça ne fonctionne pas, j'ai du oublier quelque chose.

Voilà ce que j'ai rajouté tout en haut de mon formulaire

Code :

1
2
3
4
5
6
7
8
9
10
echo "<link rel='stylesheet' type='text/css' href='../style-projects-jquery.css' />    
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.lightbox-0.5.js'></script>
<link rel='stylesheet' type='text/css' href='css/jquery.lightbox-0.5.css' media='screen' />
<script type='text/javascript'>
$(function() {
        $('#image a').lightBox();
    });
</script>";

Et un peu plus bas dans mon formulaire:

Code :

1
2
<td width='80'><div id='image'><a href='images/souscrire.PNG'><img src='images/souscrire.PNG' /></a></div>

Qu'est-ce que j'ai mal fais?

[Vil'Coyote]

comme ça à la va vite je ne vois pas trop.

peux tu regarder dans "outils>console d'erreur" de firefox si une erreur javascript se produit à l'affichage de ta 2eme page.

[absot]

J'ai donc effacer toute ma console d'erreur, j'ai rechargé ma première page, j'ai validé mon formulaire, je suis donc arrivé sur le deuxième slide et la seule erreur qui se produit est celle-là:

Code :

1
2
3
4
Avertissement*: Propriété «*zoom*» inconnue.  Déclaration abandonnée.
Fichier Source*: http://127.0.0.1/slide/css/jquery.lightbox-0.5.css
Ligne*: 62

La ligne en question dans le fichier concerné est celle-là:

Code :

1
2
zoom: 1;

[Vil'Coyote]

tu pourrais me balancer tes fichier ou m'indiquer une adresse pour voir le résultat par ce que là je vois pas trop comme ça sans avoir le code complet des pages.

[absot]

Le problème est que je ne peux pas comme je suis en stage et que ce que je fais, va voir le jour. :/

Je ne peux qu'envoyer une partie du code.