Apparition d'une lightbox lors d'un click

code32 Messages postés 66 Date d'inscription mercredi 5 novembre 2008 Statut Membre Dernière intervention 5 février 2012 - 30 mars 2011 à 10:36
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 -
Bonjour, est ce que vous pouvez me donner un tuto concernant une lightbox qui apparait lorsque je clique sur un bouton de type button pour afficher une page en evidence apres avoir faire les controles de saisi d'un formulaire:

exp:

<button type="button" id="bt" name="bt" onclick="valider2(f);" style="cursor:pointer" value="moez" >
<img src="images/submit.jpg" alt="submit" /></button>


onclick="valider2(f);"//fonction js de controle de saisi d'un formulaire , si les champs obligatoire sont saisis, une redirection vers page.php
je veux que cette page sera dans une lightbox

c urgent merci de me repondre le plus tot possible
A voir également:

8 réponses

Réponse 1 / 8
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
30 mars 2011 à 10:41

c urgent merci de me repondre le plus tot possible

Alors tu vas attendre... nous on à pas d'urgence =)
0
Réponse 2 / 8
code32 Messages postés 66 Date d'inscription mercredi 5 novembre 2008 Statut Membre Dernière intervention 5 février 2012 1
30 mars 2011 à 10:47
comment vous voulez mon ami :)
0
Réponse 3 / 8
code32 Messages postés 66 Date d'inscription mercredi 5 novembre 2008 Statut Membre Dernière intervention 5 février 2012 1
30 mars 2011 à 11:37
est ce que quelqu'un peut m'aider?!!
0
Réponse 4 / 8
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 507
30 mars 2011 à 13:26
Salut,

Pour le script de lightbox, je recommande Shadowbox et Fancybox.

Pour le reste, je n'ai pas très bien compris le problème.
Tu as donc un bouton sur ta page, et tu aimerais à son clic, afficher la lightbox après vérifications ?

Pour utiliser une image comme bouton, il faut utiliser
<input type="image" src="url.png" />


Voici un exemple :
<form method="post" action="cible.php" onsubmit="return verification(this);">
    <!-- Champs du formulaire -->

    <input type="image" src="img/submit.png" />
</form>


Et la fonction :
function verification(formulaire) {

    var errors = 0;
    var msg = "";

    // Exemple de vérification
    if(formulaire.elements['prenom'].value.length < 4) {
        errors++;
        msg += "Le champ 'Prénom' doit contenir au minimum 4 caractères.<br/>";
    }

    // Fin des vérifications

    if(errors > 0) {
        // Ouvre lightbox avec les fonctions JS proposées par le script (API)
        return false; // annule l'envoie du formulaire
    }

}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
code32 Messages postés 66 Date d'inscription mercredi 5 novembre 2008 Statut Membre Dernière intervention 5 février 2012 1
1 avril 2011 à 11:40
merci mon ami c exactement ce que je veux mais comment ouvrir lightbox apres la condition if(errors > 0) {...

je souhaite un exemple pour que je comprends bien le travail et merci une autre fois
0
Réponse 6 / 8
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 507
1 avril 2011 à 23:30
Ça dépend du script que tu choisis.

Avec Shadowbox :
https://www.shadowbox-js.com/api.html
Il y a la méthode Shadowbox.open
Il faut lui passer en argument un objet créé avec Shadowbox.buildObject
0
Réponse 7 / 8
code32 Messages postés 66 Date d'inscription mercredi 5 novembre 2008 Statut Membre Dernière intervention 5 février 2012 1
10 avril 2011 à 02:50
merci mon ami pour votre aide mais je suis toujours en problème
voici mon code : (index1.html)
essayez de le tester et dites moi quelle est ma faute

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shadowbox.js</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">
<!-- the following line is only required to run the demos -->
<script type="text/javascript" src="assets/demo.js"></script>
<!-- this section is the only one needed to run Shadowbox -->
<link rel="stylesheet" type="text/css" href="build/shadowbox.css">
<script type="text/javascript" src="build/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// a darker overlay looks better on this particular site
overlayOpacity: 0.8
// setupDemos is defined in assets/demo.js
}, setupDemos);
</script>
<script type="text/javascript">
function verification(formulaire) {

var errors = 0;
var msg = "";

// Exemple de vérification
if(formulaire.elements['prenom'].value.length < 4) {
errors++;
msg += "Le champ 'Prénom' doit contenir au minimum 4 caractères.";
//alert(msg);
}

// Fin des vérifications

if(errors > 0) {
// Ouvre lightbox avec les fonctions JS proposées par le script (API)
obj=Shadowbox.buildObject("mm","gallery/colours.jpg");
Shadowbox.open(obj);
return false; // annule l'envoie du formulaire
}

}
</script>
</head>
<body>
<div id="outer-wrapper">
<div id="stripe"></div>
<div id="wrapper">
<div id="header"> <a href="index1.html"><img alt="Shadowbox.js" src="assets/logo.gif"></a> </div>
<div id="content">
<div id="features">
<div style="clear:both;"></div>
</div>
<h2> </h2>
<p> </p>
<form method="post" action="" onsubmit="return verification(this);">
<table class="thumbs" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a rel="shadowbox" href="gallery/tiger.jpg"><img alt="Tiger" class="border" src="gallery/tiger-thumb.jpg"></a></td>
<td><a rel="shadowbox" href="gallery/colours.jpg"><img alt="Colours" class="border" src="gallery/colours-thumb.jpg"></a></td>
</tr>
<tr>
<td><input name="prenom" type="text" /></td>
<td><input type="image" src="mm.jpg" name="mm" /></td>
</tr>
</tbody>
</table>
</form>
<p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-998116-7");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
0
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 507
10 avril 2011 à 14:05
Ton code est illisible parce que tu n'as pas utilisé la balise "code" de CCM.
Tu peux aussi utiliser un hébergeur de code (gist.github.com ou Pastebin.com par exemple).
0
Réponse 8 / 8
code32 Messages postés 66 Date d'inscription mercredi 5 novembre 2008 Statut Membre Dernière intervention 5 février 2012 1
10 avril 2011 à 15:51 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shadowbox.js</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">
<!-- the following line is only required to run the demos -->
<script type="text/javascript" src="assets/demo.js"></script>
<!-- this section is the only one needed to run Shadowbox -->
<link rel="stylesheet" type="text/css" href="build/shadowbox.css">
<script type="text/javascript" src="build/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// a darker overlay looks better on this particular site
overlayOpacity: 0.8
// setupDemos is defined in assets/demo.js
}, setupDemos);
</script>
<script type="text/javascript">
function verification(formulaire) {

var errors = 0;
var msg = "";

// Exemple de vérification
if(formulaire.elements['prenom'].value.length < 4) {
errors++;
msg += "Le champ 'Prénom' doit contenir au minimum 4 caractères.";
//alert(msg);
}

// Fin des vérifications

if(errors > 0) {
// Ouvre lightbox avec les fonctions JS proposées par le script (API)
obj=Shadowbox.buildObject("mm","gallery/colours.jpg");
Shadowbox.open(obj);
return false; // annule l'envoie du formulaire
}

}
</script>
</head>
<body>
<div id="outer-wrapper">
<div id="stripe"></div>
<div id="wrapper">
<div id="header"> <a href="index1.html"><img alt="Shadowbox.js" src="assets/logo.gif"></a> </div>
<div id="content">
<div id="features">
<div style="clear:both;"></div>
</div>
<h2> </h2>
<p> </p>
<form method="post" action="" onsubmit="return verification(this);">
<table class="thumbs" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a rel="shadowbox" href="gallery/tiger.jpg"><img alt="Tiger" class="border" src="gallery/tiger-thumb.jpg"></a></td>
<td><a rel="shadowbox" href="gallery/colours.jpg"><img alt="Colours" class="border" src="gallery/colours-thumb.jpg"></a></td>
</tr>
<tr>
<td><input name="prenom" type="text" /></td>
<td><input type="image" src="mm.jpg" name="mm" /></td>
</tr>
</tbody>
</table>
</form>
<p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-998116-7");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>


est ce que ça marche comme ça?
0
avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 507
10 avril 2011 à 18:17
Si tu recopies le code sans l'indentation de ton message précédent, ça ne change rien ...
0

Discussions similaires

Site de confiance ou non ?
mlle_so -
Jaffeli -

Bonjour,
J'ai passé commande pour des lunettes de soleil ce dimanche sur un site optique espagnol :https://www.visual-click.com/ Le paiement était sécurisé (https://, cadenas), j'ai même confirmé le paiement grâce à un code envoyé sur mon téléphone portable. Le règlement s'est fait via BBVA, une banque espagnole apparemment. J'ai également fait un Impr écran et imprimé la preuve du paiement. Néanmoins, je n'ai pas reçu de confirmation par mail et je ne peux pas suivre le colis. Le montant de ma commande, qui s'élève à 127.80€ a déjà été débité. Du coup, je voulais avoir quelques avis sur ce site, si d'après-vous, j'ai raison de m'inquiéter ou pas...
Cordialement, <...

25 réponses
Info visual-click.com
monts59 -
mpmp93 -

Bonjour,
J'aurais voulu savoir, suite à votre commande sur le site visual-click.com si, au final vous avez reçu votre colis, car j'avais envie de passer commande mais j'ai peur des arnaques!
Merci de votre réponse
Cordialement
Monts59

1 réponse
La magie d'un click?
Plouf387 -
jordane45 -

Bonjour,

J'essaie de créer un bouton pour obtenir l'adresse d'un utilisateur Metamask (petit projet Web3).

La fonction web3.currentProvider.selectedAddress est issue de la library web3. Elle permet d'obtenir cette fameuse adresse.

Est-ce que quelqu'un saurait m'expliquer pourquoi la fonction que je nomme "DonneAdresse" ne marche pas de la même façon dans les deux cas:

Premier cas:

var Web3 = require('web3'); var web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8545'); var donating_address = ''; function DonneAdresse(){ let address = web3.currentProvider.selectedAd...

5 réponses
MSI CLICK BIOS 5
Theo4612 -
john99 -

Bonjour à toutes et à tous.

J'écris ce message pour venir en aide à un ami.


Mon ami vient de partir en vacances, il a dû emmener son ordinateur fixe avec lui. Il l'a donc débranché normalement et l'a emmené avec lui. Et là, en le branchant, il est en boucle sur son BIOS comme le montre l'image en dessous. Il ne sait pas quoi faire si quelqu'un a une solution SVP.



Merci de votre future aide !
Cordialement,
Théo

9 réponses
by click downloader
Danablain -
oblixx -

Salut à tous,  J'ai téléchargé by click qui fonctionne mais, une fois le fichier téléchargé comment l'envoyer vers une clé usb ? Mer(ci d'avance et @ +

5 réponses