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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
js中call与apply的用法小结
Dec 28 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
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读取文件并可支持远程文件的代码分享
2012/10/03 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
sina的lightbox效果。
2007/01/09 Javascript
js控制框架刷新
2008/08/01 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python中循环语句while用法实例
2015/05/16 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
简单了解python列表和元组的区别
2020/05/14 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
三八活动策划方案
2014/08/17 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
作风建设剖析材料
2014/10/06 职场文书
答辩状格式范本
2015/05/22 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书