Apparition d'une lightbox lors d'un click

code32 Messages postés 74 Statut Membre -  
avion-f16 Messages postés 20367 Statut Contributeur -
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 1309 Statut Membre 431
 

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 74 Statut Membre 1
 
comment vous voulez mon ami :)
0
Réponse 3 / 8
code32 Messages postés 74 Statut Membre 1
 
est ce que quelqu'un peut m'aider?!!
0
Réponse 4 / 8
avion-f16 Messages postés 20367 Statut Contributeur 4 509
 
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 74 Statut Membre 1
 
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 20367 Statut Contributeur 4 509
 
Ç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 74 Statut Membre 1
 
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 20367 Statut Contributeur 4 509
 
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 74 Statut Membre 1
  
<!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 20367 Statut Contributeur 4 509
 
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 -

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

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

5 réponses
by click downloader
Danablain -
oblixx -

5 réponses
By Click Downloader ne fonctionne plus
Fan0uu -
ChtiJacpote32 -

8 réponses