Griser une page web pour faire ressortir un formulaire

Griser une page web pour faire ressortir un formulaire - HTML/CSS - Programmation

Marsh Posté le 13-09-2010 à 14:51:19    

Bonjour,
 
Je tente de reproduire ceci sur un site web local :
 
http://support.asus.com/download/d [...] uage=en-us
Select product : Notebook
Select Series : peu importe
Select Models : peu importe
Cliquer sur le bouton search
 
Un formulaire apparaît pour sélectionner l'OS du portable tout en grisant l'arrière-plan .. Je voudrais savoir comment m'y prendre ..
Merci

Reply

Marsh Posté le 13-09-2010 à 14:51:19   

Reply

Marsh Posté le 13-09-2010 à 14:57:05    

Salut,
 
Utilise GreyBox http://orangoo.com/labs/GreyBox/
 
Y'a pas plus simple

Reply

Marsh Posté le 13-09-2010 à 15:17:47    

Merci beaucoup aspirateur ! C'est tout à fait ce que je cherchais !

Reply

Marsh Posté le 14-09-2010 à 12:09:30    

Peut-on appliquer un lien greybox à un bouton ?
 
J'ai essayé ça :
 

Code :
  1. <input type="button" value="TEST" onclick="document.location.href='http://www.google.fr/" title="Google" rel="gb_page_center[500, 500]" />


 
Mais ça ne marche pas ...

Reply

Marsh Posté le 15-09-2010 à 07:33:17    

Il n'y a que des éléments "a" dans les exemples ... Par contre regarde dans la doc à Advanced usage pour associer une des fonctions JS à n'importe quel événement de ton choix.

Reply

Marsh Posté le 15-09-2010 à 10:38:25    

J'ai bricolé mon bouton comme ceci :

Code :
  1. <a style="text-decoration:none" href="http://www.google.fr/" title="Modify Configuration" rel="gb_page_center[420, 450]"><input type="button" class="button" value="TEST" /></a>


et ça marche très bien ..

 

Par contre je bute sur un nouveau problème :
Mon href doit être dynamique : le lien doit pouvoir contenir une variable transmise par la méthode GET .. Du coup je ne peux pas simplement mettre un lien statique dans mon href mais plutôt utiliser ma propre fonction javascript ..

 

Par exemple :

 
Code :
  1. <a style="text-decoration:none" href="javascript:mafonction();" title="Modify Configuration" rel="gb_page_center[420, 450]"><input type="button" class="button" value="TEST" /></a>
 

Mais la greybox n'apprécie pas :

 
Code :
  1. Permission denied to get property Window.GB_CURRENT
  2. http://www.monsite.fr/greybox/load [...] ?s=0&nbsp; Line : 7
  4. AJS is not defined
  5. http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 43
  7. GB is undefined
  8. http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 95
 

En vue de contourner le problème j'ai essayé ça :

 
Code :
  1. <a style="text-decoration:none" onclick="javascript:mafonction(this);" title="Modify Configuration" rel="gb_page_center[420, 450]"><input type="button" class="button" value="TEST" /></a>
 

Code javascript :

 
Code :
  1. function mafonction(btn)
  2. {
  3. btn.href="./mon_url.php?cat=software";  //Par exemple. La variable cat de l'url est en réalité dynamique.
  4. }
 

L'opération se déroule sans erreur, href prend correctement sa valeur mais par contre la greybox ne fait plus son boulo et le tout réagit comme si c'était un lien normal ...

 

J'ai regardé la partie "Advance usage" mais ce sont des exemples avec des fonction javascript prédéfinies ... ça ne me conviens pas du tout ..

 

Avez-vous quelquechose à me proposer ? Merci


Message édité par Magg27 le 15-09-2010 à 10:43:59
Reply

Marsh Posté le 15-09-2010 à 11:44:17    

Pourquoi utiliser JS pour récupérer un GET ?

Code :
  1. <a style="text-decoration:none" href="<?php echo $_GET['variable']; ?>" title="Modify Configuration" rel="gb_page_center[420, 450]"><input type="button" class="button" value="TEST" /></a>


 
Ca ne fonctionne pas comme ça ?

Reply

Marsh Posté le 15-09-2010 à 12:16:49    

Salut aspirateur,

 

Non c'est pas si simple mon histoire en fait ...

 

En fait j'ai une page web sur laquelle est présenté un tableau.
Chaque ligne du tableau correspond à un produit. Les colonnes renseignent diverses informations sur le produit (nom, version, ...).
Au début de chaque ligne il y a un bouton radio qui porte l'id du produit correspondant à la ligne.

 

En dessous du tableau, il y a un bouton "Modifier" qui permet de modifier la ligne du tableau préalablement sélectionnée. Actuellement lorsque l'on actionnne ce bouton, on obtient un forumulaire prérempli pour modifier la ligne sélectionnée. Pour récupérer les bonnes infos j'ai utilisé une fonction javascript qui récupère l'id du produit sélectionné en analysant le statut des bouton radio (coché ou pas). L'id est alors envoyé en paramètre pour appelé la page du formulaire.

 

Tu me suis ?

 

Pour faire plus simple, étant donné que j'ai un seul bouton "Modifier" pour N identifiants de produits il me faut bien une fonction javascript pour rechercher le bon identifiant, et donc renvoyer le lien avec la bonne valeur en paramètre.


Message édité par Magg27 le 15-09-2010 à 12:17:16
Reply

Marsh Posté le 16-09-2010 à 08:17:48    

Je te suis pas en fait  ;)  
 
Ok pour ton tableau avec des boutons radios (c'est bien des boutons radio hein ? Pas des checkbox ?)
 
Donc normalement tout tes boutons ont le même "name".
 

Code :
  1. <form method="GET">
  2. <table>
  3. <tr>
  4. <td><input type="radio" name="NomduBouton" value="id1" ></td>
  5. <td>Colone</td>
  6. <td>Colone</td>
  7. </tr>
  9. <tr>
  10. <td><input type="radio" name="NomduBouton"  value="id2"></td>
  11. <td>Colone</td>
  12. <td>Colone</td>
  13. </tr>
  14. <input type="submit" value="Valider">
  15. </form>


 
Que je coche la première ou deuxième case j'ai toujours la "value" dans la même variable :

Code :
  1. $GET['NomduBouton']


 
Donc si tu fais pointer ton formulaire vers la page en greybox ca ne pose pas de problème de la récupérer en php.  
 
Tu vois ou je veux en venir ?
 
Sinon pour le JS, je ne vais pas être d'une grande utilité, mais as tu testé ta fonction avant de la mettre en HREF ?
 
Bref, peut être que dans ton cas ca ne peut pas s'appliquer...
 

Reply

Marsh Posté le 16-09-2010 à 15:02:07    

Effectivement cela aurait pu être une solution.

 

Cela veut dire que j'aurais pu utiliser un bouton submit comme celui-ci :

 
Code :
  1. <a style="text-decoration:none" href="javascript:document.form.submit();" id="modifier" title="Modify Configuration" rel="gb_page_center[420, 450]"><input type="button" class="button" value="TEST" /></a>
 

Pour un formulaire comme celui-ci :

 
Code :
  1. <form name="form" method="GET" action="./form_modif.php">
  2. <table>
  3. <tr><td><input type="radio" name="radio" value="1" /></td><td>Colonne</td></tr>
  4. <tr><td><input type="radio" name="radio" value="2" /></td><td>Colonne</td></tr>
  5. <tr><td><input type="radio" name="radio" value="3" /></td><td>Colonne</td></tr>
  6. </table>
  7. </form>
 

Comment faire autrement ? On est contraint d'utiliser que des <a>

 

Et bien sûr ça ne marche pas et j'ai toujours droit à cette erreur :

 
Code :
  1. Permission denied to get property Window.GB_CURRENT
  2. http://www.monsite.fr/greybox/load [...] ?s=0&nbsp; Line : 7
  4. AJS is not defined
  5. http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 43
  7. GB is undefined
  8. http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 95
 

(j'ai essayé)

 

Enfin c'est très dommage .. le concept est pourtant génial ..


Message édité par Magg27 le 16-09-2010 à 15:08:29
Reply

Marsh Posté le 16-09-2010 à 15:02:07   

Reply

Marsh Posté le 16-09-2010 à 15:53:37    

Sinon tu as lightbox aussi qui existe mais je pense que tu aura le même problème.
 
Il faut que ton href ne contienne pas de JS.
 
Pourquoi ne remplacerai tu pas les boutons radio par des liens "modifier" avec un href="taPage.php?id=$id" qui s'ouvrirait dans une box  
 

Reply

Marsh Posté le 16-09-2010 à 16:38:11    

C'est pas que je ne veuille pas y mettre de la bonne volonté mais je ne peux pas faire autrement .. Cette présentation fait partie de la charte graphique de tout le site ... Il me faut absolument mettre du javascript dans mon href.

 

Au début du post j'avais présenté le site Asus, ils y sont bien arrivé eux ...

 

Au passage j'ai essayé lightbox mais c'est que pour les photos apparament.

 

Merci beaucoup quand même pour ton aide aspirateur  ;)


Message édité par Magg27 le 16-09-2010 à 16:47:24
Reply

Marsh Posté le 06-10-2010 à 09:43:12    

Solution : Jquery
* Mon argument :
Va sur : http://fr.wowhead.com/npc=7166/app [...] -de-wrenix
Tu appuie sur l'image de droite, en dessous de capture d'écran.
Pareille ! Et regarde le code source :

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


Message édité par cetplus le 06-10-2010 à 09:44:08
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed