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必备 api中英文对照的chm手册 下载
May 03 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
Java File类的常用方法总结
Mar 18 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
使用js获取身份证年龄的示例代码
Dec 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
js+css实现全屏侧边栏
2020/06/16 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python实现数据写入excel表格
2018/03/25 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
新闻专业个人自我评价
2013/09/21 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
两只小狮子教学反思
2014/02/05 职场文书
励志演讲稿大全
2014/08/21 职场文书
公司备用金管理制度
2015/08/04 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫