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中each()的使用方法说明
Aug 19 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
ECMAScript6--解构
Mar 30 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
javascript实现评分功能
Jun 24 Javascript
vue设置默认首页的操作
Aug 12 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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实现基于文本的摩斯电码生成器
2016/01/11 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
微信小程序商品到详情的实现
2017/06/27 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
田径运动会通讯稿
2015/07/18 职场文书
学前班教学反思
2016/02/24 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
nginx 配置指令之location使用详解
2022/05/25 Servers