Introduction à l'utilisation des fenêtres modales js (boîtes de dialogue modales et boîtes de dialogue non modales)_Connaissances de base

Javascript est divisé en boîtes de dialogue modales et boîtes de dialogue sans mode. En fait, la différence entre les deux est de savoir si l'utilisateur peut travailler ailleurs sur la même page avant la fermeture de la boîte de dialogue. Par exemple, la boîte de dialogue « Ouvrir un fichier » est une boîte de dialogue modale typique Ce n'est que lorsque vous effectuez une action sur cette boîte de dialogue que vous pouvez effectuer d'autres opérations sur le programme qui ouvre la boîte de dialogue. Cela n'est pas nécessaire pour les boîtes de dialogue non modales. .

Boîte de dialogue modale : showModalDialog
Boîte de dialogue non modale : showModelessDialog

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

Valeur de retour : vReturnValue, bien sûr, la valeur de retour est renvoyée depuis la boîte de dialogue
 ; sURL : obligatoire, la page que vous souhaitez ouvrir ;

vArguments--

Paramètre facultatif, tapez : variante. Utilisé pour transmettre des paramètres à la boîte de dialogue. Le type de paramètres transmis n'est pas limité, y compris les tableaux, etc. La boîte de dialogue obtient les paramètres transmis via window.dialogArguments.
sCaractéristiques--
Paramètre facultatif, tapez : chaîne. Utilisé pour décrire l'apparence de la boîte de dialogue et d'autres informations, vous pouvez utiliser un ou plusieurs des éléments suivants, séparés par des points-virgules ";".
1.dialogHeight : la hauteur de la boîte de dialogue, pas inférieure à 100 px. L'unité par défaut de dialogHeight et dialogWidth dans IE4 est em, tandis que dans IE5, elle est px. Pour faciliter la visualisation, lors de la définition d'une boîte de dialogue modale, utilisez px. comme unité.
2.dialogWidth : largeur de la boîte de dialogue.
3.dialogLeft : distance depuis le côté gauche de l'écran.
4.dialogTop : distance à l'écran.
5.center : {yes | no | 1 | 0} : si la fenêtre est centrée, la valeur par défaut est oui, mais la hauteur et la largeur peuvent toujours être spécifiées.
6.help : {oui | non | 1 | 0} : s'il faut afficher le bouton d'aide, la valeur par défaut est oui.
7.resizing : {oui | non | 1 | 0} [IE5+] : s'il peut être redimensionné. La valeur par défaut est non.
8.status : {oui | non | 1 | 0} [IE5] : s'il faut afficher la barre d'état. La valeur par défaut est oui[Modal] ou non[Modal].
9.scroll:{ oui | non | 1 | 0 | on off } : indique si la boîte de dialogue affiche des barres de défilement. La valeur par défaut est oui.
Les attributs suivants sont utilisés dans HTA et ne sont généralement pas utilisés dans les pages Web ordinaires.
10.dialogHide:{ yes | no | 1 | 0 | on off } : indique si la boîte de dialogue est masquée lors de l'impression ou de l'aperçu avant impression. La valeur par défaut est non.
11.edge : { enfoncé | surélevé } : spécifie le style de bordure de la boîte de dialogue. La valeur par défaut est relevée.
12.unadorned :{ oui | non | 1 | 0 | on off } : La valeur par défaut est non.

Passage de paramètres :

1. Pour transmettre des paramètres à la boîte de dialogue, ils sont transmis via vArguments. Il n'y a aucune limite quant au type. Pour les types de chaîne, la longueur maximale est de 4 096 caractères. Des objets peuvent également être passés, par exemple :
-------------------------------
parent.htm

<script> 
var obj = new Object(); 
obj.name="51js"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script>

modal.htm

<script> 
var obj = window.dialogArguments 
alert("您传递的参数为：" + obj.name) 
</script>

-------------------------------
2. Vous pouvez renvoyer des informations à la fenêtre qui a ouvert la boîte de dialogue via window.returnValue, et bien sûr, il peut également s'agir d'un objet. Par exemple :
-------------------------------
parent.htm

<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script>

modal.htm

<script> 
window.returnValue="http://www.51js.com"; 
</script>

Après avoir utilisé window.showModalDialog ou window.showModelessDialog pour ouvrir une fenêtre modale, il existe des problèmes d'interaction avec la fenêtre parent.
La condition préalable aux opérations interactives est que lors de l'appel de la méthode showModalDialog ou showModelessDialog, le deuxième paramètre soit passé à window, tel que :
window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
Ensuite, il s'agit d'obtenir certaines données et méthodes de la fenêtre parent, qui sont souvent utilisées. La fenêtre parent peut généralement obtenir les paramètres de la fenêtre enfant via returnValue
.

//取得父窗口的JS变量 var 
window.dialogArguments.var; 
//获得父窗口的对象和属性 
window.dialogArguments.form1.name.value ; 
//调用父窗口的方法 fun
window.dialogArguments.fun() ;