Apparition d'une lightbox lors d'un click

code32 Messages postés 66 Date d'inscription Statut Membre Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention - 10 avril 2011 à 18:17

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

Afficher la suite

A voir également:

Apparition d'une lightbox lors d'un click
Click&clean - Télécharger - Nettoyage
By click downloader avis ✓ - Forum Virus
By click downloader ne fonctionne plus - Forum Enregistrement / Traitement audio
Msi click bios 5 bloqué - Forum BIOS
Click-n-type - Télécharger - Vie quotidienne

8 réponses

Réponse 1 / 8

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

c urgent merci de me repondre le plus tot possible

Alors tu vas attendre... nous on à pas d'urgence =)

Réponse 2 / 8

code32 Messages postés 66 Date d'inscription Statut Membre Dernière intervention 1

comment vous voulez mon ami :)

Réponse 3 / 8

code32 Messages postés 66 Date d'inscription Statut Membre Dernière intervention 1

est ce que quelqu'un peut m'aider?!!

Réponse 4 / 8

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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
    }

}

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 Statut Membre Dernière intervention 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

Réponse 6 / 8

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Ç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

Réponse 7 / 8

code32 Messages postés 66 Date d'inscription Statut Membre Dernière intervention 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">

<script type="text/javascript" src="assets/demo.js"></script>

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

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

Réponse 8 / 8

code32 Messages postés 66 Date d'inscription Statut Membre Dernière intervention 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?

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Si tu recopies le code sans l'indentation de ton message précédent, ça ne change rien ...

Discussions similaires

Site de confiance ou non ?

Info visual-click.com

La magie d'un click?

by click downloader

MSI CLICK BIOS 5

Votre réponse

Discussions similaires