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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
js实现批量删除功能
Aug 27 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php生成二维码
2015/08/10 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
linux下python抓屏实现方法
2015/05/22 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python SQLite3简介
2018/02/22 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
MySQL基础(一)
2021/04/05 MySQL
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫