Mise en oeuvre d'un tuto de votre site

**sylvainbr** · 15/06/2017, 11h54

Bonjour,

J'ai suivit ce tuto.

Je n'arrive pas à arrivé à ce résultat pour afficher le message d'erreur.
http://dmouronval.developpez.com/tut...s/exemple.html

j'ai utilisé ce code:

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
<html>
<head>
    <title>Test JavaScript pop-up</title>
    <script language="javascript">
<!--
function popupcentree(page,largeur,hauteur,options) {    
        var top=(screen.height-hauteur)/2;    
        var left=(screen.width-largeur)/2;    
        window.open(page,"","top="+top+",left="+left+",width="
    +largeur+",height="+hauteur+","+options);
}
-->
    </script>
</head>
<body onLoad='javascript:popupcentree("message.html",250,300,
    "menubar=no,scrollbars=no,statusbar=no")'>
</body>
</html>

Dans mon essai de code pour afficher le message, Firefox demande l'autorisation d'ouvrir une fenêtre Popup alors que dans votre exemple ce n'est pas le cas.

Et en plus visuellement votre exemple est top et surtout cliquer sur le message pour fermer le message est appréciable.

Serait-il possible de me donner un coup de pouce SVP?

**NoSmoking** · 15/06/2017, 19h25

Bonjour,

Firefox demande l'autorisation d'ouvrir une fenêtre Popup alors que dans votre exemple ce n'est pas le cas.

on trouve dans ton code window.open donc...
...regarde la source pour voir ce qui est fait !

**sylvainbr** · 17/06/2017, 16h16

Bonjour Smoking,

Déjà merci d'avoir déplacé mon sujet dans ce forum.

donc avec le débogeur j'ai trouver le code suivant :

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Boîtes de message personnalisées</title>
    <style type="text/css">
    body{
        font-family:Arial, Helvetica, sans-serif; 
        font-size:13px;
    }
        .info, .success, .warning, .error, .validation {
            border: 1px solid;
            margin: 10px 0px;
            padding:15px 10px 15px 50px;
            background-repeat: no-repeat;
            background-position: 10px center;
                cursor: pointer;
        }
        .info {
            color: #00529B;
            background-color: #BDE5F8;
            background-image: url('info.png');
        }
    .success {
            color: #4F8A10;
            background-color: #DFF2BF;
            background-image:url('success.png');
        }
        .warning {
            color: #9F6000;
            background-color: #FEEFB3;
            background-image: url('warning.png');
        }
        .error {
            color: #D8000C;
            background-color: #FFBABA;
            background-image: url('error.png');
        }
        .overlay{
                background-color: black;
                position: absolute;
                margin :0;
                padding : 0;
                top: 0;
                left: 0;
                display : none;
                overflow : hidden;
                border: none;
        }
        #ajout{
                position: absolute;
                top: 100px;
                left: 50%;
                margin-left: -150px;
                width: 300px;
                display: none;
        }
    </style>
<script type="text/javascript">
<!--// [CDATA[ 
var IsIE=!!document.all, calque, framefix, essai, timer;
window.onload = function(){
        calque = document.getElementById('overlay');
        framefix = calque.getElementsByTagName('iframe')[0];
        var calqueY = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var calqueX = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        calque.style.width = Math.max(document.body.offsetWidth, calqueY) + 'px';
        calque.style.height = Math.max(document.body.offsetHeight, calqueX) + 'px';
        if(IsIE){
                calque.style.filter='alpha(opacity=0)';
                calque.filters[0].opacity=0;
                framefix.style.filter='alpha(opacity=0)';
                framefix.filters[0].opacity=0;
        }
        else{
                calque.style.opacity=0;
                framefix.style.opacity=0;
        }
}
function creer_message(elt, texte){
        var i=0;
        essai = elt.cloneNode(true);
        essai.id = 'ajout';
        essai.innerHTML = texte;
        document.body.appendChild(essai);
        if(IsIE){
                essai.style.filter='alpha(opacity=0)';
                essai.filters[0].opacity=0;
        }
        else{
                essai.style.opacity=0;
        }
        calque.style.display = 'block';
        essai.style.display = 'block';
        timer = setInterval(function(){
                if(i==100){
                        clearInterval(timer);
                        timer = false;
                        essai.onclick = fin;
                }
                else{
                        if(IsIE){
                                calque.filters[0].opacity = i*0.75;
                                framefix.filters[0].opacity = i*0.75;
                                essai.filters[0].opacity = i;
                        }
                        else{
                                calque.style.opacity=(i/100)*0.75;
                                framefix.style.opacity=(i/100)*0.75;
                                essai.style.opacity=i/100;
                        }
                        i=Math.min(i+5, 100);
                }
        }, 1);
}
function fin(){
        var i=100;
        if(!timer){
                timer = setInterval(function(){
                        if(i==0){
                                clearInterval(timer);
                                calque.style.display = 'none';
                                document.body.removeChild(document.getElementById('ajout'));
                        }
                        else{
                                if(IsIE){
                                        calque.filters[0].opacity = i*0.75;
                                        framefix.filters[0].opacity = i*0.75;
                                        essai.filters[0].opacity = i;
                                }
                                else{
                                        calque.style.opacity=(i/100)*0.75;
                                        framefix.style.opacity=(i/100)*0.75;
                                        essai.style.opacity = i/100;
                                }
                                i = Math.max(i-5,0);
                        }
                }, 1);
        }
}
// ]] -->
</script> 
</head><body>
    <h1>
        Boîtes de message personnalisées.</h1>
	<div style="" class="info" onclick="creer_message(this, 'Ceci est un message d\'information personnalisé.')">
		Cliquez ici pour afficher un message d'information.</div>
	<div style="" class="success" onclick="creer_message(this, 'Ceci est un message de réussite personnalisé.')">
        Cliquez ici pour afficher un message de réussite personnalisé.</div>
    <div style="" class="warning" onclick="creer_message(this, 'Ceci est un message d\'alerte personnalisé.')">
        Cliquez ici pour afficher un message d'alerte personnalisé.</div>
    <div style="" class="error" onclick="creer_message(this, 'Ceci est un message d\'erreur personnalisé.')">
        Cliquez ici pour afficher un message d'erreur personnalisé.</div>
	<div id="overlay" class="overlay"><iframe class="overlay"></iframe></div>
	<select>
		<option>Premier item</option>
		<option>Premier item</option>
	</select>
</body></html>

et aussi les codes suivants:

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
<div id="overley" class="overlay style="widht: 190px; height: 916px; opacity: 0;"></div>
 
<style>
élément {
        width: 1920px;
        height: 916px;
        opacity: 0;
        
}
 
.overley  {
        background-colour: black;
        position absolute;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        display: none;
        overflow: hidden;
        border: none;
}
 
</style>

donc je vais essayer de me débrouiller avec ces codes en faisant des teste.
mais déjà j'ai du mal à comprendre le code java suivant :

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
var IsIE=!!document.all, calque, framefix, essai, timer;
window.onload = function(){
	calque = document.getElementById('overlay');
	framefix = calque.getElementsByTagName('iframe')[0];
	var calqueY = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	var calqueX = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	calque.style.width = Math.max(document.body.offsetWidth, calqueY) + 'px';
	calque.style.height = Math.max(document.body.offsetHeight, calqueX) + 'px';
	if(IsIE){
		calque.style.filter='alpha(opacity=0)';
		calque.filters[0].opacity=0;
		framefix.style.filter='alpha(opacity=0)';
		framefix.filters[0].opacity=0;
	}
	else{
		calque.style.opacity=0;
		framefix.style.opacity=0;
	}
}

Mise en oeuvre d'un tuto de votre site

JavaScript

Discussions similaires

Partager

Partager