在现代网页设计中，模态窗口是一种常见且实用的界面元素，它能够以悬浮层的形式提供用户交互，而不会使用户离开当前页面。父子窗口间的相互传值是Web开发中经常遇到的一个需求，尤其当模态窗口被用作子窗口时。本文将详细介绍如何使用JavaScript来操作模态窗口，并实现父子窗口之间的数据传递。
我们要了解什么是模态窗口以及如何创建一个模态窗口。在上述示例中，父窗口通过`window.showModalDialog`方法弹出了一个模态对话框，这个对话框可以看作是子窗口。`window.showModalDialog`是IE浏览器特有的方法，它能创建一个可以返回结果的模态对话框。它的参数包括要打开的URL，传递给子窗口的参数对象，以及一些可选的模态对话框的样式设置。父窗口传递给子窗口的数据是通过参数对象`obj`实现的。
父窗口代码的主体是一个`window.onload`事件，该事件确保DOM完全加载后才执行其中的脚本。在这个函数中，首先通过`document.getElementById`获取到按钮元素，并为其绑定了点击事件。当按钮被点击时，会触发`btn.onclick`函数。在这个函数中，定义了一个对象`obj`，它包含要传递给子窗口的数据`test`和父窗口对象`win`。随后通过`showModalDialog`弹出子窗口，并把`obj`对象作为参数传递给子窗口。
子窗口在接收到传递的参数后，需要通过`window.dialogArguments`来获取。这个属性包含了父窗口传递过来的参数对象。在子窗口的`window.onload`事件中，对这些参数进行了处理。具体来说，子窗口从参数对象中提取了父窗口对象`win`和要传递的消息内容`test`。然后，子窗口设置了一个按钮，当点击这个按钮时，触发了一个函数，该函数将用户输入的内容赋值给`window.returnValue`，并关闭模态对话框。
这里需要注意的是，在子窗口中设置的`window.returnValue`是用于向父窗口返回数据的。在父窗口中，通过判断`returnValue`是否为`null`来检查子窗口是否成功传值。如果子窗口传值成功，则将接收到的数据更新到父页面的某个元素中，本例中是更新`div`元素的内容。
上述的实现主要涉及到JavaScript的几个关键点：
1. `window.showModalDialog`方法用于创建模态对话框。
2. `window.dialogArguments`属性用于获取从父窗口传递过来的参数。
3. `window.returnValue`属性用于向父窗口传递数据。
另外，在HTML中，模态窗口与父窗口之间的传值通常会涉及到操作DOM元素，如获取元素、设置内容或值等。在父窗口中，通过点击按钮触发模态对话框并获取返回值；在子窗口中，通过输入字段和按钮触发返回值的操作。通过这种方式，可以实现父窗口与子窗口间的数据交互和更新。
需要注意的是，`window.showModalDialog`方法并不被所有浏览器支持，例如在Chrome和Firefox中并不支持。如果需要在这些浏览器中实现类似功能，可能需要使用其他技术如iframe或者第三方JavaScript库来模拟模态窗口效果。
对于现代Web应用开发来说，了解并掌握父子窗口间的数据传递技术，对提升用户体验以及满足特定的业务需求是非常有帮助的。
