Use JavaScript to create pop-up window for selection effect
Use window.open to open a new window, and use window.opener to get the label of the parent window;
Common window methods and properties used here
| method | description |
|---|---|
| open | Open a new window |
| close | Close browser window |
| focus | Give focus to a window |
| opener | Returns the parent window object of the currently open window, which is a window object |
| parent | Returns the parent window, which is a window object |
| self | Returns the current window object, which is a window object |
Parent 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:菜单栏
});
}
New window (child window):
<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>
