Apparition d'une lightbox lors d'un click

Fermé

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 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 - 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

A voir également:

Apparition d'une lightbox lors d'un click
Auto mouse click - Télécharger - Divers Utilitaires
Office 16 click-to-run extensibility component ✓ - Forum Microsoft Office
Click&clean download - Télécharger - Nettoyage
Msi click bios 5 au démarrage ✓ - Forum BIOS
By click downloader avis - Forum Enregistrement / Traitement audio

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

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

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

Réponse 4 / 8

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
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
    }

}

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

Réponse 6 / 8

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
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

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

<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 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
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).

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?

avion-f16 Messages postés 19250 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 22 décembre 2024 4 505
10 avril 2011 à 18:17

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 ?

MSI CLICK BIOS 5

Info visual-click.com

La magie d'un click?

Mon msi Click bios 5 se lance toute seul !!!