JavaScript实现弹出子窗口并传值给父窗口_javascript技巧

新建父窗口页面:

加入以下脚本

复制代码 代码如下:

<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>

以上就是本人实现这个简单功能的全部内容了,感觉应该还有更便捷的方法,有知道的小伙伴还请留言说明下。

时间: 2024-07-31 22:48:02

JavaScript实现弹出子窗口并传值给父窗口_javascript技巧的相关文章

父窗全能使用-弹出子窗体后,要求父窗体能继续使用,并且打开其它程序时能够复盖子窗体,不知道哪位大神有好办法!

问题描述 弹出子窗体后,要求父窗体能继续使用,并且打开其它程序时能够复盖子窗体,不知道哪位大神有好办法! 解决方案 思路: 1.将弹出窗体去掉 2.将扩展字段的页面写在当前页面panel中,点击隐藏显示panel

JavaScript常用的弹出广告及背投广告实现方法_javascript技巧

本文实例讲述了JavaScript常用的弹出广告及背投广告实现方法.分享给大家供大家参考.具体分析如下: 弹出广告和背景广告在大网站用的比较多,也是站长的必备代码,本代码段中包括弹出窗口广告以及背投广告两种形式,根据自己的需要,你可以随意选择. 注:这类广告不建议大家用,大多浏览器都会把此类AD拦截,只为大家学习之用. 复制代码 代码如下: <html> <head> <title>JavaScript常用的弹出广告及背投广告代码</title> </

javascript弹出带文字信息的提示框效果_javascript技巧

本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di

javascript实现的弹出层背景置灰-模拟(easyui dialog)_javascript技巧

页面比较丑,只把功能实现了.^ ^ 复制代码 代码如下: <title>模仿easyui dialog的效果</title> <script> //取得页面元素 var getElement = function() { return document.getElementById(arguments[0]) || false; } function openDialog(dialogId) { var maskId = "mask"; //如果有,

js+CSS实现弹出居中背景半透明div层的方法_javascript技巧

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

js弹出层永远居中实现思路及代码_javascript技巧

弹出层窗口永远居中 复制代码 代码如下: <script type="text/javascript"> var isIE=window.XMLHttpRequest?false:true; var aIsIE={}; window.onload=function(){ if(isIE){ window.onscroll=doIE; window.onresize=doIE; } function doIE(){ aIsIE.top=document.documentEle

js写一个弹出层并锁屏效果实现代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

关于Bootstrap弹出框无法调用问题的解决办法_javascript技巧

问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样:   官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/

js点击文本框弹出可选择的checkbox复选框_javascript技巧

本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/