Griser une page web pour faire ressortir un formulaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Griser une page web pour faire ressortir un formulaire

Magg27

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

Publicité

aspirateur

Salut,

Utilise GreyBox http://orangoo.com/labs/GreyBox/

Y'a pas plus simple

Magg27

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

Magg27

Peut-on appliquer un lien greybox à un bouton ?

J'ai essayé ça :

Code :

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

phosphoreloaded

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.

Magg27

J'ai bricolé mon bouton comme ceci :

Code :

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

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

Permission denied to get property Window.GB_CURRENT
http://www.monsite.fr/greybox/load [...] ?s=0  Line : 7
AJS is not defined
http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 43
GB is undefined
http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 95

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

Code :

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

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

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

aspirateur

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

Code :

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

Magg27

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

aspirateur

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 :

<form method="GET">
<table>
<tr>
<td><input type="radio" name="NomduBouton" value="id1" ></td>
<td>Colone</td>
<td>Colone</td>
</tr>
<tr>
<td><input type="radio" name="NomduBouton" value="id2"></td>
<td>Colone</td>
<td>Colone</td>
</tr>
<input type="submit" value="Valider">
</form>

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

Code :

$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...

Magg27

Effectivement cela aurait pu être une solution.

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

Code :

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

<form name="form" method="GET" action="./form_modif.php">
<table>
<tr><td><input type="radio" name="radio" value="1" /></td><td>Colonne</td></tr>
<tr><td><input type="radio" name="radio" value="2" /></td><td>Colonne</td></tr>
<tr><td><input type="radio" name="radio" value="3" /></td><td>Colonne</td></tr>
</table>
</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 :

Permission denied to get property Window.GB_CURRENT
http://www.monsite.fr/greybox/load [...] ?s=0  Line : 7
AJS is not defined
http://www.monsite.fr/greybox/loader_frame.html?s=0 Line : 43
GB is undefined
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

Publicité

aspirateur

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

Magg27

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

cetplus

Wazard dans l'ombre

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 :

<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

FORUM HardWare.fr

Programmation

HTML/CSS

Griser une page web pour faire ressortir un formulaire

Sujets relatifs
probleme page PHP sous internet explorer	Bloquer et rediriger un appel de page ajax
Renseigner par programmation un Formulaire	ajoute une ligne de champ renseignée sur un formulaire
Formulaire et texte qui disparait	Bloquer champ formulaire creer avec Acrobat
Bonton pour liker une partie d'une page	[HTML/CSS/Javascript] Formulaire à remplir
Problème d'aperçu partiel de mon formulaire php dans Outlook	cherche à créer page géolocalisation collaborative
Plus de sujets relatifs à : Griser une page web pour faire ressortir un formulaire

Page générée en 0.082 secondes