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 相关文章推荐
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
node.js中watch机制详解
Nov 17 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
React 父子组件通信的实现方法
Dec 05 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php数组去重实例及分析
2013/11/26 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
js中document.write的那点事
2014/12/12 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
初识Node.js
2015/03/20 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
编辑个人求职信范文
2013/09/21 职场文书
大学毕业生自我鉴定
2013/11/05 职场文书
公司董事长岗位职责
2014/06/08 职场文书
股份合作协议书
2014/09/10 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
群众路线表态发言材料
2014/10/17 职场文书
2015公司年度工作总结
2015/05/14 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
Java基础-封装和继承
2021/07/02 Java/Android