[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
Le modal pose un problème avec les interfaces en onglets
Le modal pose un problème avec les interfaces en onglets
OK sorry mais à la bourre...
OK sorry mais à la bourre...
dériver la fonctionnement...
Bonjour,
Je viens de lire avec attention cette proposition de fenetre "modale"...
Ca m'interesse énormément car je cherche justement à mettre cela en place sur un projet.
Pour autant, mon fonctionnement est un peu différent car je ne voudrais pas spécifier d'URL appelante or cela semble obligatoire avec la fonction showModalDialog.
Il se trouve que ces "popup" sont destinées à indiquer une erreur à l'utilisateur dans la saisie d'un formulaire par exemple ou autre.
Le contenu est donc à chaque fois différent.
Pour info, c'est un dev java (jsp.servlet avec Struts). Je suis donc en train d'essayer de créer un taglib qui reprendrais les erreurs struts catchées et créerait une fenetre modale pour les afficher au retour de la JSP.
si je fais :
Code:
1
2
3
4
|
window.open('', "scroll:no;center:yes;help:no;dialogWidth:200px;dialogHeight:160px;resizable:no");
window.write("foo");
window.close(); |
Ca fonctionne mais n'empeche pas de revenir sur la fenetre appelante d'ou l'utilisation d'un principe de fenetre modale (utilisateurs sous IE normalement)
même chose si je fais
Code:
1
2
3
4
|
window.open('', "scroll:no;center:yes;help:no;dialogWidth:200px;dialogHeight:160px;resizable:no");
var document = window.document;
document.write('Hellow Word'); |
Maintenant, si j'utilise
Code:
1
2
|
window.showModalDialog('',null,"scroll:no;center:yes;help:no;dialogWidth:200px;dialogHeight:160px;resizable:no"); |
Là, je ne peux pas utiliser les fonction write ou autre (enfin d'apres mes tests).
Bref, avez vous une méthode pour créer une fenetre modale sans appeler d'url externe et de remplir le HTML via un write ou le document ou autre...
En espérant avoir été clair
Mavvv
