[Code source] showModalDialog Cross Platform Enfin !
Salut,
En réponse à une demande d'un de nos confrères dans un post HTML/CSS je vous fais part de ma dernière trouvaille concernant l'utilisation de showModalDialog qui fonctionne sous IE,NN,FF,OPERA et SAFARI.
J'espère que ça vous sera utile...
Le code source est composé de 4 éléments :
- fichier javascript Include (à télécharger)
- La fonction qui dérive showModalDialog en fonction du navigateur
- fonction appelante
- dérivation de la fonction qui permet de renvoyer la valeur à la fenêtre appelante à l'aide de window.returnValue depuis la fenêtre appelée.
Etape 1 : Fichier include côté navigateur
Télécharger le fichier include suivant : http://www.ezlogic.mc/_Includes/scripts/dialog.js
Placez le dans le répertoire dans lequel vous rangez vos scripts puis, faites une référence à ce fichier en utilisant la balise (je précise que c'est un code source que j'ai récupéré sur le net mais que j'ai du modifier pour qu'il fasse exactement ce que je souhaitais):
Code:
1
2
|
<script language=javascript src="/_Includes/scripts/dialog.js"></script> |
C'est grace à la fonction dialog que je gère le focus de la fenêtre ouverte.
Etape 2 : Dérivation de la fonction showModalDialog
Cette technique permet de toujours utiliser la fonction showModalDialog sur tous les navigateurs (et c'est bien pratique).
Comme vous pourrez le constater, j'analyse les paramètres passés à la fonction showModalDialog et je les convertis pour qu'ils correspondent aux paramètres de la fonction open.
Code:
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
|
if (!window.showModalDialog) {
window.showModalDialog=function(a,b,c) {
//préparation des arguments
var targ = new Array();
var sArgs = new String();
var rExp = new RegExp();
rExp = /px/g;
var S = new String(c);
if (S) {
targ = S.split(";")
maxi = targ.length
for (i=0;i<maxi;i++) {
S = new String(targ[i])
tThisArg = S.split(":")
S = new String(tThisArg[0])
switch (S.toLowerCase()) {
case "dialogheight":
S = new String(tThisArg[1])
sArgs += ",height=" + S.replace(rExp,"")
break;
case "dialogleft":
S = new String(tThisArg[1])
sArgs += ",left=" + S.replace(rExp,"")
break;
case "dialogtop":
S = new String(tThisArg[1])
sArgs += ",top=" + S.replace(rExp,"")
break;
case "dialogwidth":
S = new String(tThisArg[1])
sArgs += ",width=" + S.replace(rExp,"")
break;
case "resizable":
S = new String(tThisArg[1])
switch(S) {
case "1":
case "yes":
case "on":
sArgs += ",resizable=1"
break;
default :
sArgs += ",resizable=0"
}
break;
case "scroll":
/*
sArgs += ",scrollbars=1"
*/
S = new String(tThisArg[1])
switch(S) {
case "1":
case "yes":
case "on":
sArgs += ",scrollbars=1"
break;
default :
sArgs += ",scrollbars=0"
}
break;
case "status":
S = new String(tThisArg[1])
switch(S) {
case "1":
case "yes":
sArgs += ",status=1"
break;
default :
sArgs += ",status=0"
}
break;
default:
//"unadorned"
//"dialoghide"
//"center"
//"edge"
//"help"
}
}
if (sArgs) {
sArgs = sArgs.substr(1)
sArgs += ",menubar=0,titlebar=1,toolbar=0,location=0"
}
Dialog(a,null,null,sArgs);
}
}
} |
Etape 3 : La fonction appelante
Code:
1
2
3
4
5
6
7
8
9
|
/* URL de la fenêtre appelée (notez que les paramètres sont passés en GET*/
var szURL="../dlgQte.asp?Mode=<%=Mode%>&CodeLangue=<%=CodeLangue%>&Valeur=" + ValeurInitRecupCoteClient
RV = window.showModalDialog(szURL,null,"scroll:no;center:yes;help:no;dialogWidth:200px;dialogHeight:160px;resizable:no");
if (RV){
//Uniquement pour IE, pour les autres navigateurs ça se passe dans la fenêtre appelee
window.document.frm.hidQte.value = RV
window.document.frm.submit();
} |
Etape 4 : La valeur de retour
Code:
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
|
function cmdOk_onclick() {
var qte = window.document.getElementById("txtQte")
var sMontant = new String(qte.value)
if ((sMontant.indexOf(".")!=-1)||(sMontant.indexOf(",")!=-1)) {
alert("<%=txtMSG1%>")
return false
}
var Montant = parseFloat(qte.value)
if (isNaN(Montant)){
alert("<%=txtMSG2%>");
return false;
}
RV=qte.value;
if (window.opener) {
/*
Cas non IE, présence de window.opener puisque l'on est dans un window.open
Je passe la valeur au champ du formulaire de la fenêtre appelante et je fais directement le submit avant de fermer la fenêtre appelée
*/
window.opener.document.frm.hidQte.value = RV;
window.opener.document.frm.submit();
} else {
window.returnValue = RV;
}
window.close();
} |
Voilà... avec ça vous devriez y arriver.
J'apprécierais que l'on poste toutes les améliorations que vous pourriez y apporter sur ce thread.
@+
Laurent Jordi
Un peu de travail pour l'équipe developpez
Salut,
Je pense que ça place est ici, si les modérateurs estiment qu'il faut la mettre ailleur, qu'il le fasse, je voudrais juste être prévenu.
@+
Laurent Jordi
Désactivation des contrôles de la fenêtre appelante
L'intérêt du code est d'être assuré que la fonction showModalDialog Fonctionne.
Tu peux lister tous les contrôles d'une page et les mettre à disabled en ouvrant la fenêtre. Le problème est que tu dois modifier la fonction appelante à chaque fois, c'est un peu lourd.
@+
Laurent Jordi
Paux tu publier ton code que je regarde ?
Paux tu publier ton code que je regarde ?
Merci
Laurent
