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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
JS常用正则表达式总结
Nov 12 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
javascript实现的listview效果
2007/04/28 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
代码详解django中数据库设置
2019/01/28 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python Gitlab Api 使用方法
2019/08/28 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
经典毕业生求职信
2014/07/12 职场文书
学校教师安全责任书
2014/07/23 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
雷锋之歌观后感
2015/06/10 职场文书
岗位聘任协议书
2015/09/21 职场文书
导游词之吉林花园山
2019/10/17 职场文书
golang中的空slice案例
2021/04/27 Golang
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js