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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue穿梭框实现上下移动
Jan 29 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
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Vue异步加载about组件
2017/10/31 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python 日期操作类代码
2018/05/05 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
pandas 数据类型转换的实现
2020/12/29 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
旷课检讨书1000字
2014/02/14 职场文书
二手房购房意向书范本
2014/04/01 职场文书
学生保证书
2015/01/16 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
python使用glob检索文件的操作
2021/05/20 Python
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python