JavaScript实现弹出子窗口并传值给父窗口
作者:bea
新建父窗口页面: 加入以下脚本 代码如下: <html xmlns=" http://www.w3.org/1999/xhtml" > <head runat="server"> <title>First</title> </head> <script type="text/javascript"> function ShowDialog(Url) { var iWidth=5
新建父窗口页面:
加入以下脚本
代码如下:
<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>
以上就是本人实现这个简单功能的全部内容了,感觉应该还有更便捷的方法,有知道的小伙伴还请留言说明下。
有用 | 无用
加入以下脚本
代码如下:
<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>
以上就是本人实现这个简单功能的全部内容了,感觉应该还有更便捷的方法,有知道的小伙伴还请留言说明下。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery多媒体插件jQuery Media Plugin使用详解
- jquery图片播放浏览插件prettyPhoto使用详解
- js中匿名函数的创建与调用方法分析
- 浅谈Javascript中匀速运动的停止条件
- 浅谈Javascript如何实现匀速运动
- Javascript添加监听与删除监听用法详解
- Javascript 实现图片无缝滚动
- 使用JavaScript获取地址栏参数的方法
- JS获取各种宽度、高度的简单介绍
- JQuery右键菜单插件ContextMenu使用指南
- 简单谈谈jQuery(function(){})与(function(){})(jQuery)
- jQuery多级弹出菜单插件ZoneMenu
- 使用jquery菜单插件HoverTree仿京东无限级菜单
- jQuery实现视频作为全屏幕背景
- JS实现判断滚动条滚到页面底部并执行事件的方法
- 轻松创建nodejs服务器(10):处理上传图片
- 轻松创建nodejs服务器(10):处理POST请求
- 浅析jQuery EasyUI中的tree使用指南
- 轻松创建nodejs服务器(7):阻塞操作的实现