JavaScript 模态窗口的使用及传值：window.showModalDialog 和window.showModalessDialog
JavaScript 的window 对象提供的两个方法，用于新建一个(非)模态窗口，这是一个很朴素的窗口，虽然难看但却相当方便实用。方便之处在于往打开的新窗口中传数据，且在关闭了窗口后，原来的窗口也能轻易地接收到返回的数据。
window.showModalDialog 和window.showModalessDialog 的区别仅仅是前者打开的是模态窗口，而后者打开的是非模态窗口，两个函数的用法是一模一样的（模态指它始终处在最前端，在关闭它之前无法对父窗口进行操作）。
window.showModalDialog 和window.showModalessDialog 的调用格式（具体使用方法请参考js手册）：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
模态窗口的使用步骤一般是这样的：
1. 在父页面中调用window.showModalDialog 打开模态窗口，调用的时候可以传递数据，这个方法会有一个返回值，待会儿会用上；
2. 在打开的子窗口中可通过window.dialogArguments 来获取父页面传递的数据，进行了相关的操作之后，在关闭窗口之前把要返回给父页面的值赋给window.returnValue 即可，另外关闭窗口也可调用window.close() 实现；
3. 在父页面中window.showModalDialog 的返回值便是子窗口返回的数据。
注：以上窗口间的传值的类型是混合型的，即任意类型（包括数组和对象等）。
这里举一个例子，在一个页面中收集用户名，然后打开新窗口，在新窗口中显示用户名并要求选择一个爱好，然后提交将窗口关闭，最后在原来的页面中显示该用户的爱好，代码比较简单，相信大家都能看懂~
父页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>modal dialog study</title> </head> <body> <input type="text" id="username" /> <input type="button" onclick="dialog_test()" value="submit" /> <p id="info"></p> </body> </html> <mce:script type="text/javascript"><!-- function dialog_test() { var username = document.getElementById('username').value; var url = 'modal_dialog.html'; var args = {"username" : username}; var features = 'dialogHeight:150px; dialogWidth:300px; status:no;'; var result = window.showModalDialog(url, args, features); if (result != 0) { document.getElementById('info').innerHTML = 'thank you <strong>' + username + '</strong>, ' + 'your selected hobby is <strong>' + result + '</strong>'; } } // --></mce:script>
模态窗口 modal_dialog.html ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>modal dialog study</title> </head> <body> Welcome <strong id="username"></strong>, please select your most favourite: <select id="favourite"> <option value="0">--please select--</option> <option value="music">music</option> <option value="basketball">basketball</option> <option value="kof98">kof98</option> <option value="others">others</option> </select> <br /> <input type="button" value="submit" onclick="submitted()" /> </body> </html> <mce:script type="text/javascript"><!-- var args = window.dialogArguments; document.getElementById('username').innerHTML = args.username; function submitted() { window.returnValue = document.getElementById('favourite').value; window.close(); } // --></mce:script>