Fermeture automatique d'un fancybox v2

**jytest** · 13/11/2013, 17h39

Bonsoir à tous,

J'ai une page HTML "fancybox.htm" (page 1)
qui, quand on clique sur un bloc rouge,
ouvre une fancybox "diamants/fancyboxes/inscription-newsletter/inscription-newsletter.php" (page 2).

Alors ici, 2 scénaries :
- Si je refuse de m'inscrire, en cliquant sur la croix de fermeture ou en dehors de fancybox, aucun souci.
- Par contre, une fois que j'ai encodé une adresse email,
et que le format de l'adresse email est valide,
je voudrais que la fancybox se ferme automatiquement
et que soit alors affichée la page "inscription-newsletter.htm" (page 3)

Je n'arrive pas à fermer la fancybox et à passer vers la page 3.
Pouvez-vous m'aider ?

Voici un lien direct pour tester

Voici le code de "fancybox.htm" (page 1):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
	<title>Essai</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="diamants/js/fb/jquery.fancybox.css" media="screen" />
	<script type="text/javascript" src="diamants/js/jquery.js"></script>
    <script type="text/javascript" src="diamants/js/fb/jquery.fancybox.pack.js"></script>
	<script type="text/javascript">
                $(".fancybox01").fancybox({
                        openEffect  : 'none',
                        closeEffect : 'none',
                        padding: ['0px', '0px', '0px', '0px'],
                        width: '402px',
                        scrolling: 'no',
                });
        </script>
</head>	
 
<body>
<a class="fancybox01 fancybox.iframe" href="http://www.celinni.com/diamants/fancyboxes/inscription-newsletter/inscription-newsletter.php" style="border:0px;">
   	<div id="ici" style="width:100px; height:100px; margin:50px auto; background-color:#FF0000; cursor:pointer;">
</div>
</a>
</body>
</html>

Voici "diamants/fancyboxes/inscription-newsletter/inscription-newsletter.php" (page 2)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<?php
session_start();
ob_start();
$php="inscription-newsletter";
$rubrique="newsletter";
//	require_once("../diamants/php/cliquer.inc.php");
//	cliquer($rubrique);
date_default_timezone_set('Europe/Brussels');
if (isset($_GET['ok']) && !empty($_GET['ok'])) {
	$ok=$_GET['ok'];
} else {
	$ok=0;
}
$swerror = 0;
if ($ok==1) {
	$swerror=1;
	$email = trim($_POST['email']);
	if (strlen($email)>0) {
		$atom = '[-a-z0-9!#$%&\'*+\\/=?^_`{|}~]';
		$domain = '([a-z0-9]([-a-z0-9]*[a-z0-9]+)?)';		   
		$regex = '/^'.$atom.'+'.'(\.'.$atom.'+)*'.'@'.'('.$domain .'{1,63}\.)+'.$domain.'{2,63}$/i'; 
		if (preg_match($regex, $email)) {
			header("Location: ../../../inscription-newsletter.htm");
			exit;
		}
	}
}
ob_end_flush();
?>
<!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">
<meta name = "reply-to" content = "david@celinni.com"/>
<meta name = "author" content = "creaprint.be"/>
<meta name = "keywords" content = ""/>
<meta name = "description" content = "Inscription à la newsletter Celinni"/> 
<title>Inscription newsletter</title>
<style type="text/css">
<!--
-->
</style>
<!--
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />
-->
<link type="image/x-icon" rel="shortcut icon" href="../../images/favicon/celinni.ico"  />
<link type="text/css" rel="stylesheet" href="../../css/font_CenturyGothic.css" media="all" />
<link type="text/css" rel="stylesheet" href="../../css/font_CenturyGothicRegular.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/general.css">
</head>
 
<body>
 
<div id="site">
	<div id="header">
    	<p class="centrer">
            <span class="font_CenturyGothicRegular c40 bold">INSCRIVEZ-VOUS</span><br>
            <span class="c30">à la Newsletter</span>
        </p>
    </div>
	<div id="contenu">
    	<div style="height:151px;">
            <p class="c30 centrer" style="padding-top:10px;">NOUS VOUS OFFRONS</p>
            <div style="padding-top:9px;">
                <div style="float:left; margin:0 15px 0 25px; letter-spacing:-15px;" class="c115">10</div>
                <div style="float:left; margin:0 10px 0 0;" class="c115">0</div>
                <div style="float:left;" class="c45">€</div>
                <div style="float:left; margin:20px 0 0 15px;" class="c25">en Bon<br>d'Achat !</div>
                <div style="clear:both;">
                </div>
            </div>
        </div>
        <div style="width:214px; height:30px; background-color:#CCCCCC; margin-left:171px; padding-top:2px; text-align:center;">
        	<p class="c10 majuscule centrer" style="margin:0 10px 0 10px; border-bottom:solid 1px #000000;">La presse en parle</p>
        	<span class="centrer"><img src="images/presse01.png" width="28" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse02.png" width="33" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse03.png" width="35" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse04.png" width="36" height="11" alt="presse_celinni"/></span>
        </div>
        <div id="liste01">
        	<ul>
            	<li class="">Nos offres exclusives</li>
            	<li class="">L'actualité Celinni</li>
			</ul>
        </div>
        <div style="height:48px;">
            <form action="inscription-newsletter.php?ok=1" method="post" name="myform02" id="formulaire">
            <div style="float:left; width:217px; padding-left:26px;">
                <input name="email" type="text" id="email" height="15" size="45" value="<?php echo $_POST['email']; ?>" class="zone0 <?php echo ($ok==1 && empty($_POST['email']))?'valable':'valable'; ?>" placeholder="Entrez votre adresse email">
        	</div>
            <div style="float:left; margin-left:10px;">
                <a href="#" onclick="javascript:document.myform02.submit();">
                <div class="boutonpaniersimple" style="margin-top:0px;">Je m'inscris</div></a>
            </div>
            <div style="clear:both;">
            </div>
            </form>
        </div>
    </div>
</div>
 
</body>
</html>

J'ai aussi pensé à tester l'adresse email par javascript...
Mais j'en suis au même point... Je n'en sors pas !

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?php
	session_start();
	ob_start();
	$php="inscription-newsletter";
	$rubrique="newsletter";
//	require_once("../diamants/php/cliquer.inc.php");
//	cliquer($rubrique);
	date_default_timezone_set('Europe/Brussels');
 
	if (isset($_GET['ok']) && !empty($_GET['ok'])) {
		$ok=$_GET['ok'];
	} else {
		$ok=0;
	}
 
	$swerror = 0;
	if ($ok==1) {
		$swerror=1;
		$email = trim($_POST['email']);
		if (strlen($email)>0) {
			$atom = '[-a-z0-9!#$%&\'*+\\/=?^_`{|}~]';
			$domain = '([a-z0-9]([-a-z0-9]*[a-z0-9]+)?)';		   
			$regex = '/^'.$atom.'+'.'(\.'.$atom.'+)*'.'@'.'('.$domain .'{1,63}\.)+'.$domain.'{2,63}$/i'; 
			if (preg_match($regex, $email)) {
				header("Location: ../../../inscription-newsletter.htm");
				exit;
			}
		}
	}
 
	ob_end_flush();
?>
 
<!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">
<meta name = "reply-to" content = "david@celinni.com"/>
<meta name = "author" content = "creaprint.be"/>
<meta name = "keywords" content = ""/>
<meta name = "description" content = "Inscription à la newsletter Celinni"/> 
<title>Inscription newsletter</title>
<style type="text/css">
<!--
-->
</style>
<!--
<link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />
-->
<link type="image/x-icon" rel="shortcut icon" href="../../images/favicon/celinni.ico"  />
<link type="text/css" rel="stylesheet" href="../../css/font_CenturyGothic.css" media="all" />
<link type="text/css" rel="stylesheet" href="../../css/font_CenturyGothicRegular.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/general.css">
<script type="text/javascript">
	function isEmail(){
		var	email = document.getElementById("email").value;
		var regEmail = new RegExp('^[0-9a-z._-]+@{1}[0-9a-z.-]{2,}[.]{1}[a-z]{2,5}$','i');
		return regEmail.test(email);
	}
</script>
</head>
 
<body>
 
<div id="site">
	<div id="header">
    	<p class="centrer">
            <span class="font_CenturyGothicRegular c40 bold">INSCRIVEZ-VOUS</span><br>
            <span class="c30">à la Newsletter</span>
        </p>
    </div>
	<div id="contenu">
    	<div style="height:151px;">
            <p class="c30 centrer" style="padding-top:10px;">NOUS VOUS OFFRONS</p>
            <div style="padding-top:9px;">
                <div style="float:left; margin:0 15px 0 25px; letter-spacing:-15px;" class="c115">10</div>
                <div style="float:left; margin:0 10px 0 0;" class="c115">0</div>
                <div style="float:left;" class="c45">€</div>
                <div style="float:left; margin:20px 0 0 15px;" class="c25">en Bon<br>d'Achat !</div>
                <div style="clear:both;">
                </div>
            </div>
        </div>
        <div style="width:214px; height:30px; background-color:#CCCCCC; margin-left:171px; padding-top:2px; text-align:center;">
        	<p class="c10 majuscule centrer" style="margin:0 10px 0 10px; border-bottom:solid 1px #000000;">La presse en parle</p>
        	<span class="centrer"><img src="images/presse01.png" width="28" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse02.png" width="33" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse03.png" width="35" height="11" alt="presse_celinni" style="margin:0 18px 0 0;"/><img src="images/presse04.png" width="36" height="11" alt="presse_celinni"/></span>
        </div>
        <div id="liste01">
        	<ul>
            	<li class="">Nos offres exclusives</li>
            	<li class="">L'actualité Celinni</li>
			</ul>
        </div>
        <div style="height:48px;">
            <form action="inscription-newsletter.php?ok=1" method="post" name="myform02" id="formulaire">
            <div style="float:left; width:217px; padding-left:26px;">
                <input name="email" type="text" id="email" height="15" size="45" value="<?php echo $_POST['email']; ?>" class="zone0 <?php echo ($ok==1 && empty($_POST['email']))?'valable':'valable'; ?>" placeholder="Entrez votre adresse email" onChange="isEmail();">
        	</div>
            <div style="float:left; margin-left:10px;">
                <a href="#" onclick="javascript:document.myform02.submit();">
                <div class="boutonpaniersimple" style="margin-top:0px;">Je m'inscris</div></a>
            </div>
            <div style="clear:both;">
            </div>
            </form>
        </div>
    </div>
</div>
 
</body>
</html>

A l'aide, svp !