Dernière mise à jour :2008-10-15

informatique

Le langage JavaScript fournit plusieurs types de boîte de dialogue pré-établies soit :

  • window.alert();
  • window.confirm();
  • window.prompt();

Lorsqu'une de ces boîte de dialogue est lancée, l'utilisateur ne peut faire le focus sur la fenêtre qui a ouvert la boîte de dialogue tant que celle-ci n'est pas fermée.

Dans le langage JScript (version JavaScript sur Internet Explorer), il existe deux méthodes supplémentaires qui permettent d'appliquer cette propriété à n'importe quelle nouvelle fenêtre. Ces deux méthodes sont :

  • showModalDialog() (Apparue avec la version 4 d'Internet Explorer)
  • showModelessDialog() (Apparue avec la version 5 d'Internet Explorer)

Voici la syntaxe de ces méthodes :

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures])

Le premier argument (sURL) est une chaine de caractères permettant de spécifier l'URL de la page qui devra être ouverte dans la nouvelle fenêtre. Le second argument (vArguments) permet de spécifier les arguments à utiliser dans la nouvelle fenêtre.

Lorsqu'une nouvelle fenêtre est ouverte par l'une de ces méthodes, l'objet « window » de la nouvelle fenêtre dispose de la propriété dialogArguments qui contient la valeur du paramètre « vArgument ».

Dans une page vous avez le code suivant qui peut par exemple être déclenché lorsqu'un utilisateur appuit sur un bouton.

window.showModalDialog("uneurlquelconque/unfichierquelconque.htm", window, "center:yes;dialogWidth:400px;dialogHeight:400px;");

Ce code, comme vous l'aurez deviné, fait ouvrir une fenêtre de 400 pixels par 400 pixels. Vous remarquerez qu'il passe aussi l'objet window de la fenêtre chargé d'ouvrir la boîte de dialogue. Celà permettra d'utiliser cet objet à partir de la boîte de dialogue.

Imaginons que notre boîte de dialogue contient le code suivant :

Listing 1.0 Boite de dialogue
1. <html>
2. <head>
3. <title>A525G - Exemple showModalDialog</title>
4. <script language="JavaScript" type="text/javascript">
5. <!--
6.
7. function changeUrl()
8. {
9.   dialogArguments.location.href = menu.options[menu.selectedIndex].value;
10.   window.close();
11. }
12.
13. // -->
14. </script>
15. </head>
16. <body>
17. Choisir un site web :
18. <p>
19. <form name="form1">
20. <select name="select1">
21.   <option value="http://www.a525g.com" selected>A525G - Portail d'information</option>
22.   <option value="http://www.perdu.com">perdu.com</option>
23.   <option value="http://www.patate.com">patate.com</option>
24. </select>
25. <input type="button" value="Load" onclick="changeUrl();">
26. </form>
27. </body>
28. </html>

Cette page affichera une liste déroulante dans laquelle l'utilisateur pourra choisir l'adresse d'un site web et un bouton. Lorsque l'utilisateur cliquera sur celui-ci, l'adresse choisie sera chargée dans la page ayant servit à l'ouverture de la boîte de dialogue.

La commande permettant la mise en marche de cette opération est celle-ci :

dialogArguments.location.href = menu.options[menu.selectedIndex].value;

Sur cette ligne, dialogArguments représente la fenêtre qui a ouvert la boite de dialogue.

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2003-09-16

Aucun commentaire pour l'instant.