js实现window 弹窗小案例
来源：互联网 发布：淘宝商城摩托车配件 编辑：程序博客网 时间：2024/06/04 18:16
首先大家先看一下这个小案例的效果图，可能大家刚看到下面这张效果图的时候有点小小的疑惑，小编在这向大家解释下，所谓的window弹窗事件就是在图片的左边有个选择按钮，当我们点击该按钮时候就会弹出右边的图片，在右边的图片大家可以根据自己的喜号去选择左边文本框中要填充的内容，比如一点击102编号所对应的选择，在左边文本框就会填充该选择的内容。
下面给大家讲解下怎么去实现这个弹窗小案例：
首先第一步：需要大家创建一个页面，页面上有两个输入项和一个按钮，其次按钮上面要有一个事件，就是弹出新窗口。具体实现代码如下：
<!doctype html>
<html >
<head>
<title>Document</title>
</head>
<body>
编号： <input type="text" id="numid"/><br/>
姓名： <input type="text" id="nameid"/><br/>
<input type="button" value="选择" onclick="open1()"/>
<script type="text/javascript">
//实现弹出窗口的方法
function open1(){
window.open("user.html","","width='300',height='200'");
}
</script>
</body>
</html>
第二步就是创建弹出的窗口页面，首先创建一个表格，表格的每一行要有操作，编号和姓名以及按钮，按钮上面要有一个事件，就是把当前对应的编号和姓名赋值到第一个页面对应的文本框中，具体实现代码如下;
<!doctype html>
<html >
<head>
<title>Document</title>
</head>
<body>
<table border="2" bordercolor="blue">
<tr>
<td>操作</td>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s('101','任盈盈')"/></td>
<td>101</td>
<td>任盈盈</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s('102','岳灵珊')"/></td>
<td>102</td>
<td>岳灵珊</td>
</tr>
<tr>
<td><input type="button" value="选择" onclick="s('103','令狐冲')"/></td>
<td>103</td>
<td>令狐冲</td>
</tr>
</table>
<script type="text/javascript">
// 实现s方法
function s(num1,name1){
//需要把num1和name1赋值到window窗口
//跨页面操作 opener: 得到创建这个窗口的窗口 得到window窗口
var p = window.opener;
p.document.getElementById("numid").value=num1;
p.document.getElementById("nameid").value=name1;
//关闭窗口
window.close();
}
</script>
</body>
</html>
- js实现window 弹窗小案例
- 关于window对象和js效果案例
- window案例
- js实现幻灯片案例解析
- js中用window.attachEvent实现 window.load多个函数
- JS实现自定义alert,自定义window.open
- js中window来实现跳转
- Angular.js+Bootstrap实现固定表头案例
- 用js实现选项卡案例
- js实现简单拖拽案例
- BOM之Window案例
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- window.js
- window.js
- js window
- js window
- 【Studio】导入其他项目卡死
- Effective Java(Item: 38 to 56)
- 使用Form表单向远处的网页提交信息代码__Cookie方式
- C语言中的指针数组与数组指针的理解
- 图的遍历（dfs、bfs、最短路、最小生成树、拓扑排序）
- js实现window 弹窗小案例
- 【bzoj 1616】[Usaco2008 Mar]Cow Travelling游荡的奶牛（dfs|dp）
- Android四大组件之Service学习
- CodeForces 733D Kostya the Sculptor
- 《APUE》笔记-第十章-信号
- 连续输入多个字符出现的问题解决方法
- 1016.11.06 连续第四天总结
- Ubuntu下开启root登录
- SLES 11 SP2 安装 Nagios
