Window弹窗案例

Window弹窗案例：

1：需求
    *创建一个页面
        有两个输入项
        有一个按钮(用来实现子窗口的弹出)
    *创建一个弹出窗口（子窗口）
        实现一个表格输出
        表格每一行有一个按钮，姓名及ID
        按钮对应一个事件，将当前编号以及姓名信息编辑到第一页相对应位置
2：实现过程
    *创建第一个页面
        相关知识：
            **open()    方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
            **语法        window.open(URL,name,features,replace)
            **注意        window.open()和document.open()的区别

<html>
<body>
<script type="text/javascript">


myWindow=window.open('','MyName','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
myWindow.opener.document.write("This is the parent window")
</script>
</body>
</html>


<body>

代码如下
<body>
编号：<input type="text" id="numid"/><br/>
姓名：<input type="text" id="nameid"/><br/>
<input type="button" value="选择" onclick="open1()"/>
</body>
<script type="text/javascript">
//实现弹出窗口的方法
function open1(){
//实现open
window.open("cd.html","","width=250,height=150");
}
</script>

    *创建第二个弹出窗口
        相关知识点：
            **opener
                是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用
                创建的窗口可以引用创建它的窗口所定义的属性和函

                  <table border="1" bordercolor="blue">
                 <tr>
                     <td><input type="button" value="选择" onclick="s1('100','东方不败');"/></td>
                     <td>100</td>
                     <td>东方不败</td>
                 </tr>
                 <tr>
                     <td><input type="button" value="选择" onclick="s1('101','岳不群');"/></td>
                     <td>101</td>
                     <td>岳不群</td>
                 </tr>
                 <tr>
                     <td><input type="button" value="选择" onclick="s1('102','林平之');"/></td>
                     <td>102</td>
                     <td>林平之</td>
                 </tr>
                 </table>

            </body>
                <script type="text/javascript">
                     //实现s1方法
                     function s1(num1,name1) {
                         //需要把num1和name1赋值到window页面
                        //跨页面的操作  opener：得到创建这个窗口的窗口 得到window页面
                         var pwin = window.opener; //得到window页面
                         pwin.document.getElementById("numid").value = num1;
                         pwin.document.getElementById("nameid").value = name1;
                         //关闭窗口
                         window.close();
                     }
                 </script>

Window弹窗案例：

猜你喜欢