showModalDialog

Cette fonction a pour but d'ouvrir une fenêtre Modale
De même que window.open() ouvre une fenêtre, window.showMoadalDialog() ouvre une fenêtre modale, qui garde donc le focus
Il de possible:

Navigateur ShowModalDialog supportée window.opener supportée
Firefox oui oui
IEX oui non
Safari non  
Opera non  
Google Chrome oui  

Une étude à fin 2008, montre que Firefox et IEX se partage 95% du marché

L'intérêt d'une fenêtre modale prend tout son sens lorsque votre utilisateur doit fournir une réponse
Cette fonction est donc toute indiquée pour la gestion des boites de dialogue du type ouvrir fichier, enregistrer, format...
Par contre pour fournir une information (aide, à propos...) nous préfèrerons window.open() non modale!

Forme générale de la fonction:

showModalDialog(String url, String param, String options)

Paramètres

Pour plus d'explication voyont le code de la fenêtre appelante ci-dessous:

Code de la fenêtre mère (appelante)

<html>
<head>
<script language="JavaScript">
function openWindow() {
var url = "cibleshowdialog.html";
/* -------------------------------------
ici les arguments sont passés de la fenêtre mère (appelante) à la fenêtre fille (appelée) par une notation objet :
mais on aurait aussi bien utilisé une variable ou un tableau: var myArguments="red";
---------------------------------------- */
var myArguments = new Object(); //ici passage de paramètres sous la forme objet
myArguments.param1 = "red";
var sFeatures="dialogHeight:600px; dialogLeft:200px; dialogTop:200px; dialogWidth:700px;";
var retour = window.showModalDialog(url, myArguments,sFeatures); // retour contient les paramètres de réponse de la fenêtre fille et non pas un identifiant de cette fenêtre!
alert("valeur en retour de la fenêtre appelée: "+retour); //pour visualisation seulement
}
</script>
</head>
<body>
<button onClick="openWindow();">Open window</button>
</body>
</html>

Pour tester cliquer sur le bouton, vous verrez alors apparaître le code de la fenêtre fille (appelée)

Passage de paramètres entre fenêtre fille et fenêtre Mère

Transmission d'arguments de la fenêtre Mère vers la fenêtre fille (Modale)

Lors de l'appel de la fenêtre fille par la fenêtre mère il est possible de transmettre des arguments (paramètres) à la fenêtre fille de la façon suivante:

var myArguments= new Object(); //ici passage de paramètres sous la forme objet
myArguments.param1 = "red";
var retour = window.showModalDialog(url,myArguments,sFeatures)

Ici nous avons utiliser la forme objet, mais vous pouvez passer une variable classique ou encore un tableau

Lecture des Arguments par la fenêtre fille modale (envoie de la fenêtre Mère)

var reception= window.dialogArguments; //lit les paramètres de la fenêtre mère
alert("Reception des arguments de la fenêtre mère: "+reception.param1); //visualisation de la forme objet, mais reçoit aussi les variables classiques ou les tableaux

La aussi la forme objet reste simple, mais la récupération d'une variable classique ou d'un tableau ne pose pas davantage de problème et s'effectue sous la même forme.

Retour de paramètres de la fenêtre fille (Modale) vers la fenêtre Mère

Lors de la fermeture de la fenêtre fille (Modale), il est possible de retourner à la fenêtre Mère des paramètres de la façon suivante:

var myRetour = new Object(); //ici passage de paramètres sous la forme objet
myRetour.fichier = "essai.xml";
myRetour.extension = ".xml";
window.returnValue = myRetour

Grace à window.returnValue nous pouvons retourner les paramêtres à la fenêtre Mère avant de fermer la fenêtre fille (Modale)

Nous utilisons ici une forme objet en retour de paramètres mais il est tout à fait possible de retourner une variable classique ou un tableau.

Lecture des paramètres par la fenêtre Mère (Retour de la fenêtre fille Modale)

var retour = window.showModalDialog(url, "", sFeatures); //c'est la syntaxe d'appel de la fenêtre Modale sans arguments (vers fenêtre fille) et avec retour de paramètres
alert(retour.extension);
alert(retour.fichier);

Vous lirez de la même façon (sans la notation: objet.propriété) une variable ou un tableau!

Les options de la fenêtre Modale

Par fenêtre Modale nous entendons fenêtre fille ou appelée!
La fenêtre appelante (mère) définit les options d'affichage de la fenêtre fille Modale à travers le troisième paramètre utilisé pour la création de la fenêtre Modale. Dans notre code il s'agit de la variable:

var sFeatures="dialogHeight:600px; dialogLeft:200px; dialogTop:200px; dialogWidth:700px;";

Options Explications
dialogHeight:

Fixe la hauteur de la boîte de dialogue (vous pouvez indiquer les unités)

dialogLeft:

Fixe la position du coin supérieur Gauche de la boite de dialogue par rapport à l'angle supérieur gauche du bureau

dialogTop: Fixe la position du coin supérieur Haut de la fenêtre de dialogue par rapport à l'angle supérieur gauche du bureau.
dialogWidth:

Fixe la largeur de la fenêtre de dialogue (voir Remarques pour défaut d'unité de mesure)
center:{ yes | no | 1 | 0 | on | off }

Spécifie si il faut centrer la fenêtre de dialogue au sein du bureau. La valeur par défaut est yes.
dialogHide:{ yes | no | 1 | 0 | on | off }

Spécifie si la fenêtre de dialogue est cachée lors de l'impression ou en utilisant l'aperçu avant impression. Cette fonctionnalité n'est disponible que si une boîte de dialogue est ouverte à partir d'une application de confiance. La valeur par défaut est no.
edge:{ sunken | raised } Spécifie le style du bord de la fenêtre de dialogue. La valeur par défaut est raised.
resizable:{ yes | no | 1 | 0 | on | off }

Spécifie si la fenêtre de dialogue a des dimensions fixe. La valeur par défaut est no.
scroll:{ yes | no | 1 | 0 | on | off }

Spécifie si la fenêtre de dialogue affiche les barres de défilement. La valeur par défaut est yes.
status:{ yes | no | 1 | 0 | on | off }

Spécifie si la fenêtre de dialogue affiche une barre d'état. La valeur par défaut est yes pour les fenêtres de dialogue non sécurisée (untrusted dialog windows)et no pour les fenêtres de dialogue digne de confiance (trusted dialog windows).
unadorned:{ yes | no | 1 | 0 | on | off }

Spécifie si la fenêtre de dialogue affiche une bordure frontière (border window chrome). Cette fonctionnalité n'est disponible que si une boîte de dialogue est ouverte à partir d'une application de confiance (trusted application). La valeur par défaut est no.
zoominherit:{ yes | no | 1 | 0 | on | off } Autorise un effet zoom sur la fenêtre (zoom inherit: zoom hérité)