Discussion :

[CUCARACHA]

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 :

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

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 :

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
 
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 :

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

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 :

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
 
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

[siddh]

bon je vais regarder tout ca,
tu devrais peut etre le mettre dans le thread codes sources ?

[CUCARACHA]

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

[siddh]

ils te previennent toujours par mp

[denisC]

Je vais tester ça, et effectivement, si ça marche, ça sera déplacé dans les codes sources (sans la discussion, bien entendu, et avec un MP à l'auteur original Laurent).

Voila qui a en tout cas l'air très alléchant

[denisC]

Après étude un peu plus précise, les parties 3 et 4 sont des utilisations spécifiques dans ton cas. Ca peut figurer comme exemple, mais dans ce cas, il manque pas mal de choses.

La partie 1 permet d'emuler des fenetre modales sous FFx (en renvoyant tous les evenements de la fenetre parente vers un focus de la fenetre modale, bien joué).

La partie 2 permet d'avoir des arguments identiques sous FFx et IE pour l'utilisation des fenetres modales: c'est bien pratique

[siddh]

en fait mes fenetres modales sont des divs et non des popups

Je met un div transparent sous mon div/popup qui fais la taille de la page et du coup ca deviens modal.

[CUCARACHA]

Il te suffit d'aller sur le site http://itfr.idmontecarlo.com avec FF, OPERA, ou SAFARI.

Rubrique produits
Bouton consultation du catalogue et de cliquer sur une imagette. Tu verras que ça ouvre bien une fenêtre modale.

Accessoirement, tu peux aussi tester le EZ Lists (les listes de sélections par filtrage successif) c'est également cross platform.

@+

Laurent Jordi

[CUCARACHA]

Je précise qu'avec opera ça ouvre un nouvel onglet et qu'il est donc impossible que ce dernier soit modal mais je crois que l'on peut paramétrer opera pour qu'il n'utilise pas le mode multi onglets.

@+

Laurent Jordi

[denisC]

Bouton consultation du catalogue et de cliquer sur une imagette. Tu verras que ça ouvre bien une fenêtre modale.

Accessoirement, tu peux aussi tester le EZ Lists (les listes de sélections par filtrage successif) c'est également cross platform.

Pour les fenetres modales, sous Opéra, c'est pas ça.... Ca fait juste une pop-up, vers laquelle on est redirigée quand on clique dans la fenetre parente. De la à appeller ça modale....

Sinon, pour les listes, j'avoue qu'il y a un peu beaucoup de frames à mon gout

[siddh]

euh ben je peux quand meme cliquer sur tes listes de selection avec la popup ouverte

sous ffx

[CUCARACHA]

Sauf erreur, si ta page contient des contrôles HTML, ton DIV passera dessous ces contrôles et c'est très moche.

Pour arriver à faire une boite de dialogue "in line" qui passe par dessus les contrôles HTML il faut utiliser une iframe et la remplir dynamiquement.

J'utilise cette technique dans mon éditeur wysiwyg mais c'est encore plus compliqué que le code que je viens de poster.

@+

Laurent

[siddh]

non le div se met bien au dessus

sous ie il faut juste rajouter une iframe dessous pour les select

[CUCARACHA]

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

[siddh]

ben en fait, avec mon code, j instancie un objet que j'ai appelé MachinFrame et apres je lui fais des setSize, setModal, ... display() ...

[CUCARACHA]

Je ne connais pas setModal, tu peux en parler un peu plus ?

@+

Laurent Jordi

[siddh]

euh ben c est une methode de mon objet qui fera en sorte que ma fenetre sera modale.

L avantage de cette solution c est que un antipopup ne me génera pas et que je peux "styler" mes fenetres comme je veux

[jjj1]

bonjour,
j'ai besoin d'ouvrir des fenêtres modales sous IE et FF, celà fonctionne très bien avec ton code mais je voudrais m'affranchir totalement du ShowModalDialog de IE et ne passer que par ta fonction.

J'ai essayé de modifier ton code pour qu'il tourne sous IE, j'ai remplacé les addEventListener par des attachEvent, pas de bug mais les évènement passent au travers... une idée ?

(faire celà me permettrait d'utiliser la modale normalement sans avoir à la mettre systématiquement derrière une frame)

merci d'avance

[CUCARACHA]

Paux tu publier ton code que je regarde ?

Merci

Laurent

[jjj1]

Voilà les seules lignes que j'ai modifiées...
résultat, l'ouverture se fait bien mais pas de modalité, pas d'évènement capté..

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
 
     // capture some window's events
     function capwin(w) {
        if (w.addEventListener)                                               //ligne ajoutée
        {
          w.addEventListener("click", Dialog._parentEvent, true);
          w.addEventListener("mousedown", Dialog._parentEvent, true);
          //w.addEventListener("focus", Dialog._parentEvent, true);
        } else {
          w.attachEvent("onclick", Dialog._parentEvent);           //ligne ajoutée
          w.attachEvent("onmousedown", Dialog._parentEvent);  //ligne ajoutée
        }
     };
     // release the captured events
     function relwin(w) {
          //w.removeEventListener("focus", Dialog._parentEvent, true);
          if (w.removeEventListener)                                                    //ligne ajoutée
          {
            w.removeEventListener("mousedown", Dialog._parentEvent, true);
            w.removeEventListener("click", Dialog._parentEvent, true);
          }else {
            w.detachEvent("onmousedown", Dialog._parentEvent);     //ligne ajoutée
            w.detachEvent("onclick", Dialog._parentEvent);                  //ligne ajoutée
          }
     };
     capwin(window);
     // capture other frames
     for (var i = 0; i < window.frames.length; capwin(window.frames[i++]));
     // make up a function to be called when the Dialog ends.
     Dialog._return = function (val) {
          if (val && action) {
               action(val);
          }
          relwin(window);
          // capture other frames
          for (var i = 0; i < window.frames.length; relwin(window.frames[i++]));
          Dialog._modal = null;
     };
};
if (1) { //(!window.showModalDialog) {                      //test inhibé
  window.showModalDialog=function(a,b,c) {

[/quote]