首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现弹出子窗口并传值给父窗口

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
javascript学习笔记(二十) 获得和设置元素的特性（属性）
Jun 20 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
js实现倒计时效果（小于10补零）
Mar 08 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 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
Flutter(2) element-china-area-data(1) self(1) MybatisPlus(2) JSON(10) SpringBoot(22) Normal From(1) tabBar(1) capture(1) uniapp(4)
You might like
建立动态的WML站点(二)
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
javascript写的简单的计算器，内容很多，方法实用，推荐
2011/12/29 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python文件操作类操作实例详解
2014/07/11 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
任意一块网页内容实现“活”的背景（目前火狐浏览器专有）
2014/05/07 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Exception类的常用方法
2012/06/16 面试题
班干部演讲稿
2014/04/24 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
《叶问2》观后感
2015/06/15 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL