JavaScript实现弹出子窗口并传值给父窗口


Posted in Javascript onDecember 18, 2014

新建父窗口页面:

加入以下脚本

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>First</title>

</head>

<script type="text/javascript">

function ShowDialog(Url) 

{ 

      var  iWidth=560; //模态窗口宽度

      var  iHeight=300;//模态窗口高度

      var  iTop=(window.screen.height-iHeight-100)/2;

      var  iLeft=(window.screen.width-iWidth)/2;

      var returnValue=window.showModalDialog(Url, "newwindow", "dialogHeight:"+iHeight+"px; dialogWidth:"+iWidth+"px; toolbar:no; menubar:no; scrollbars:no; resizable:no; location:no; status:no;left:200px;top:100px;");

      document.getElementById("TextBox1").innerText=returnValue;

} 

</script>

<body>

    <form id="form1" runat="server">

         <input id="Button1" type="button" value="button" onclick="ShowDialog('./second.aspx')" />

         <div><asp:TextBox ID="TextBox1" runat="server" Width="67px"></asp:TextBox></div>

     </form>

</body>

</html>

创建second.html页面:

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>second</title>

    <!--<base target="_self" ></base>-->

</head>

<script language="javascript">

    function closeDiag()

    {

        window.opener=null;

        window.close();

    }  

    function OK()

    {

        var Value=document.getElementsByName("myRadio");

        for(var i=0;i<Value.length;i++)

        {

            if(Value[i].checked)

            {  

                window.returnValue = Value[i].value;

                window.close();

            }

            else

            {

                document.getElementById("Lab_Info").innerText="没有选中项,请选择!";

            }

        }      

    }  

</script>

<body>

    <form id="form1" runat="server">

    <div>

          <asp:DataGrid ID="dgSjygl" runat="server" AllowPaging="True" AutoGenerateColumns="False"

                        BackColor="White" Font-Size="9pt" PageSize="5" Width="100%" Height="127px" OnItemDataBound="dgSjygl_ItemDataBound">

                        <PagerStyle Mode="NumericPages" />

                        <AlternatingItemStyle BackColor="Gainsboro" />

                        <ItemStyle BackColor="#EEEEEE" ForeColor="Black" HorizontalAlign="Center" />

                        <Columns>

                            <asp:TemplateColumn>             

                                <HeaderTemplate>

                                    <label>选择</label>

                                </HeaderTemplate>

                                <ItemTemplate>                                    

                                    <input type="radio" id="myRadio" name="myRadio"  value='<%# DataBinder.Eval(Container.DataItem, "id") %>'>

                                </ItemTemplate>

                                <HeaderStyle Font-Bold="True" HorizontalAlign="Center" Width="60px" />

                                <ItemStyle HorizontalAlign="Center" />

                            </asp:TemplateColumn>

                            <asp:BoundColumn DataField="ID" HeaderText="编号">

                                <HeaderStyle Font-Bold="True"  Width="75px" HorizontalAlign="Center"/>

                            </asp:BoundColumn>

                            <asp:BoundColumn DataField="MC" HeaderText="名称">

                                <HeaderStyle Font-Bold="True"  Width="90px" HorizontalAlign="Center"/>

                                <ItemStyle HorizontalAlign="Center" />

                            </asp:BoundColumn>

                            <asp:BoundColumn DataField="BT" HeaderText="标题">

                                <HeaderStyle Font-Bold="True" HorizontalAlign="Center"/>

                            </asp:BoundColumn>

                        </Columns>

                        <HeaderStyle BackColor="#7481BA" ForeColor="Yellow" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Font-Size="Small" />

                    </asp:DataGrid>

    </div>

    <div>

          <input id="Btn_OK" type="button" onclick="OK()" value="确 定"/>

          <input id="Btn_Cancel" type="button" onclick="clickDiag()"  value="取 消" />

     </div>        

    </form>

</body>

</html>

以上就是本人实现这个简单功能的全部内容了,感觉应该还有更便捷的方法,有知道的小伙伴还请留言说明下。

Javascript 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
又一个小巧的图片预加载类
May 05 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
JavaScript获取Url里的参数
Dec 18 #Javascript
Javascript实现单张图片浏览
Dec 18 #Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 #Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 #Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 #Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 #Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 #Javascript
You might like
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
node.js遍历目录的方法示例
2018/08/01 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python中有函数重载吗
2020/05/28 Python
Django封装交互接口代码
2020/07/12 Python
如何查找网页漏洞
2016/06/22 面试题
班队活动设计方案
2014/01/30 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
生产厂长岗位职责
2014/02/21 职场文书
会计岗位说明书
2014/07/29 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB