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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章