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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
深入密码加salt原理的分析
2013/06/06 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
splice slice区别
2006/10/09 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
Angular4开发解决跨域问题详解
2017/08/28 Javascript
angular动态表单制作
2018/02/23 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
导航工程专业自荐信
2014/09/02 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
2015年推普周活动方案
2015/05/06 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
公司保密管理制度
2015/08/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python