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 相关文章推荐
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
node中的cookie的具体使用
Sep 13 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
node.js 如何监视文件变化
Sep 01 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脚本的10个技巧(3)
2006/10/09 PHP
php防盗链的常用方法小结
2010/07/02 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
jquery.pager.js分页实现详解
2019/07/29 jQuery
ES6之Proxy的get方法详解
2019/10/11 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python Matplotlib库入门指南
2015/05/18 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
详解Python绘图Turtle库
2019/10/12 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python Gabor滤波器讲解
2020/10/26 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
小学生新学期寄语
2014/01/19 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js