利用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>