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编程起步(第五课)
Feb 27 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
Vue3 中的数据侦测的实现
Oct 09 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内存管理之谁动了我的内存
2013/06/20 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
php支付宝APP支付功能
2020/07/29 PHP
php中错误处理操作实例分析
2019/08/23 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python实现的数据结构与算法之队列详解
2015/04/22 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
如何运行带参数的python脚本
2019/11/15 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
中学生获奖感言
2014/02/04 职场文书
2014年创卫实施方案
2014/02/18 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
捐助倡议书范文
2014/04/15 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
小学班主任事迹材料
2014/12/17 职场文书
退货证明模板
2015/06/23 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android