Popup jquery executer en fonction d'une variable

**viavba** · 22/11/2012, 14h29

bonjour,

j'ai sur une page php un formulaire, lorsque l'utilisateur a rempli le formulaire, je transfert les données vers une page PHP de traitement et qui envoie un mail.
Jusque-là ça !

a l'issu de l'envoi de ce mais je retourne sur ma première page PHP et en fonction de la valeur d'une variable (variable de session), j'affiche un message d'envoi réussi ou non.

je teste la valeur de la variable "envoimail" et en voici le code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
var envoimail= '<?=$envoimail;?>';
 
 if (envoimail == 1)
 	{
	alert('Votre demande a bien été enregistrée, nous vous recontacterons dans les plus brefs délais!')
	}
if	(envoimail == 2)
	{
	alert('L\'envoi du mail a échoué, veuillez réessayer SVP.')
	}
if	((envoimail != 1)&&(envoimail != 2))
	{
	}
</script>

Bon ça, ça fonctionne mais terminé par un message d'alerte ..... Je voudrais faire mieux.

Donc je me tourne vers le JAVA et le query en reprenant ce tuto : http://sohtanaka.developpez.com/tuto...css-et-jquery/

je précise, je n'arrive pas à lire correctement le java, je bloque.

J’arrive à ouvrir la popup sans cliquer sur le lien mais dès que je supprime le lien ça ne fonctionne pas
voici le code :

Code :

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#FFFFFF; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
 
		/* TEST */
        .voile-noir {
            position: fixed;
            display: none;
            left: 0;
            top: 0; 
            width: 100%;
            height: 100%;
            opacity: 0.75;
            background: gray; 
            z-index: 9999;
        }
        .popup-block{
	position: fixed;
	display: none;
	top: 50%;
	left: 50%;
	padding: 20px;
	z-index: 99999;
	font-size: 1.2em;
	background: #fff;
	border: 20px solid #ddd;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
	border-radius: 10px;
        }
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
        .popup-btn-close {
            float: right; 
            margin: -55px -55px 0 0;
        }
    </style>
</head>
<body>
	        <a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="500px">Voir la pop-up - Width = 500px</a>
    <section class="popup-block"> 
        <img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/bomber.gif" alt="Lil bomb dude" style="float: right; margin: 50px 0 0 20px;" /> 
        <h2>Popup 1</h2> 
        <p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p> 
        <p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
    </section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 
	<script>
	 // voici ma variable a tester
	var envoimail= '<?=$envoimail;?>';
 
	 // voici un test par l'absurde pour disocier ce code du formulaire pour l'instant
	if((envoimail != 1) || (envoimail != 2))
        $(function(){
            $(".popup-light").fadeIn(function() {
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionner
                        // Le popup doit avoir sa taille d�finitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
    </script>
	</body>  
</html>