JS事件笔记（BOM）：弹出选择窗口

最新推荐文章于 2024-04-24 09:22:16 发布

ResidualBridge

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量625

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46410264/article/details/105106702

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

利用JavaScript来制作弹窗进行选择的效果

利用window.open打开新的窗口，用window.opener获取父窗口的标签；

这里运用到的window常用方法和属性

方法	描述
open	打开一个新窗口
close	关闭浏览器窗口
focus	把焦点给予一个窗口
opener	返回当前打开窗口的父窗口对象，是一个window对象
parent	返回父窗口，是一个window对象
self	返回当前窗口对象，是一个window对象

父窗口html:

<body>
<form>
    <table width="600px" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right">姓名：</td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <input type="radio" name="sex" value="0" />男
                <input type="radio" name="sex" value="1" />女
            </td>
        </tr>
        <tr>
            <td align="right">出生年月：</td>
            <td>
                <select>
                    <option value="2020">2020</option>
                    <option value="2019">2019</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                </select>年
                <select>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>月
            </td>
        </tr>
        <tr>
            <td align="right">在读学校：</td>
            <td>
                <input type="text" id="school" />
                <input type="submit" value="选择" id="submit" />
            </td>
        </tr>
    </table>
</form>
<script src="js/window.js"></script>
</body>

window.js:

{
    let submit = document.getElementById("submit");  //读取id为submit的标签
    submit.addEventListener("click", function( event ){  //对submit添加点击事件
        /* window.open打开一个新的窗口 
        * window.open("url","name","features");
        *url:打开一个新的窗口，加载url指定的页面;
        *name:可以不写;
        *features:字符串，可以是新窗口的一些属性;
        */
        window.open("choice.html","","toolbar=no,scrollbars=yes," +
            "menubar=no,width=300px,height= 300px,top=200px,left=300px");
        //toolbar:工具栏，scrollbars:下拉滚动条，menubar:菜单栏
    });
}

新窗口（子窗口）：

<style>
    ul,li,a{
        list-style: none;
        text-decoration: none;
    }
    body>ul>li>a{
        color: #134788;
        display: block;
        padding: 10px 20px 10px 0;
    }
    body>ul>li>a:hover{
        background-color: #B292FF;
        color: white;
    }
</style>
<body>
<ul id="navUl">
    <li><a href="#">重庆大学</a></li>
    <li><a href="#">重庆师范大学</a></li>
    <li><a href="#">西南大学</a></li>
    <li><a href="#">重庆邮电大学</a></li>
    <li><a href="#">重庆交通大学</a></li>
    <li><a href="#">西南农业大学</a></li>
    <li><a href="#">重庆医科大学</a></li>
    <li><a href="#">西南政法大学</a></li>
    <li><a href="#">重庆理工大学</a></li>
    <li><a href="#">长江师范学院</a></li>
    <li><a href="#">重庆三峡学院</a></li>
    <li><a href="#">重庆工程学院</a></li>
    <li><a href="#">重庆工商大学</a></li>
</ul>
<script>
    {
        let navUl = document.getElementById("navUl");  //读取id为navUl的标签
        let li = navUl.children;      //获取navUl的子标签数组
        for( let i = 0; i <= li.length-1; i++ ){      //对li进行遍历
            li[i].addEventListener("click",function( event ){
                /* window.opener指的是弹出窗口的父窗口 */
                //找到父窗口id为school的标签
                let school = window.opener.document.getElementById("school");  
                let tar = event.currentTarget;   //当前选中标签
                let lia = tar.children[0];       //当前选中标签索引为0的子标签
                school.value = lia.innerHTML;    //将当前选中的标签的内容赋值给父窗口的school标签的值
                self.close();                    //关闭当前窗口
                window.opener.focus();           //用focus方法将焦点聚集到父窗口
            })
        }
    }
</script>
</body>

ResidualBridge

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS事件笔记（BOM）：弹出选择窗口

利用JavaScript来制作弹窗进行选择的效果利用window.open打开新的窗口，用window.opener获取父窗口的标签；这里运用到的window常用方法和属性方法描述open打开一个新窗口close关闭浏览器窗口focus把焦点给予一个窗口opener返回当前打开窗口的父窗口对象，是一个window对象parent返回父窗口...
复制链接

扫一扫