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判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
微信小程序实现单选功能
Oct 30 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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
编译问题
2006/10/09 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
如何判断php数组的维度
2013/06/10 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
js停止输出代码
2008/07/20 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
setTimeout学习小结
2017/02/08 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python多线程使用方法实例详解
2019/12/30 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
销售实习自我鉴定
2013/12/07 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书