您的位置：首页 > Web前端 > HTML

一个使用Html做的简单的window弹窗案例

2015-09-26 21:23 525 查看

第一个简单页面如下图所示：

这个页面大家几乎都会使用Html做的名为window.html的页面，这里就直接写出代码如下：

<html>
<head>
<title>Document</title>
</head>
<body>
姓名：<input type="text" id="name"/><br/>
编号：<input type="text" id="id"/><br/>
<input type = "button" value ="选择" onclick = "open1();"/>
<script type="text/javascript">
function open1(){
window.open("user.html","","with=100, height = 50")
}//打开名为user.html的弹窗

</script>
</body>
</html>

点击选择后，会打开名为user.html的弹窗,user.html的现实内容为所需要输入的数据，页面情况如下：

点击选择后，姓名和编号会返回到window.html的页面中去，并且关闭弹窗，其代码如下：

<html>
<head>
<title>Document</title>
</head>
<body>
<table border="1" bordercolor="green">
<tr>
<td>操作</td>
<td>姓名</td>
<td>编号</td>
</tr>
<tr>
<td> <input type = "button" value ="选择" onclick = "get1('东方','101');"/></td>
<td>东方</td>
<td>101</td>
</tr>
<tr>
<td> <input type = "button" value ="选择" onclick = "get1('小米','102');"/></td>
<td>小米</td>
<td>102</td>
</tr>
<tr>
<td> <input type = "button" value ="选择" onclick = "get1('大米','103');"/></td>
<td>大米</td>
<td>103</td>
</tr>
</table>
</body>
<script type ="text/javascript">
function get1(name1,num1)
{
var p = window.opener;
p.document.getElementById("name").value=name1;
p.do
4000
cument.getElementById("id").value=num1;
window.close();
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 代码弹窗

相关文章推荐

新的分享

章节导航