JavaScript實現(xiàn)彈出子窗口并傳值給父窗口
更新時間：2014年12月18日 11:13:48 投稿：hebedich
這篇文章主要介紹了JavaScript實現(xiàn)彈出子窗口并傳值給父窗口,方法很簡單，這里推薦給大家，需要的朋友可以參考下
新建父窗口頁面：
加入以下腳本
復制代碼 代碼如下:
<html xmlns=" <head runat="server">
<title>First</title>
</head>
<script type="text/javascript">
function ShowDialog(Url)
{
var iWidth=560; //模態(tài)窗口寬度
var iHeight=300;//模態(tài)窗口高度
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>
創(chuàng)建second.html頁面：
復制代碼 代碼如下:
<html xmlns=" <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>
以上就是本人實現(xiàn)這個簡單功能的全部內(nèi)容了，感覺應該還有更便捷的方法，有知道的小伙伴還請留言說明下。
相關文章
這篇文章主要為大家詳細介紹了vue2.0實戰(zhàn)第一篇基礎入門的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JS通過ajax動態(tài)讀取xml文件內(nèi)容的方法
這篇文章主要介紹了JS通過ajax動態(tài)讀取xml文件內(nèi)容的方法,實例分析了Ajax操作XML文件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
js仿QQ中對聯(lián)系人向左滑動、滑出刪除按鈕的操作
這篇文章主要介紹了js仿QQ中對聯(lián)系人向左滑動、滑出刪除按鈕的操作，即編寫一個js向左滑動刪除 交互特效的插件，感興趣的小伙伴們可以參考一下2016-04-04
RegExp對象是原生JavaScript中表示正則表達式的對象。接下來通過本文給大家詳細介紹javascript regexp對象知識，需要的的朋友參考下吧2017-02-02
本文介紹了“node在兩個div之間移動,用ztree實現(xiàn)”的方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了異步加載JS、CSS代碼的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js中判斷兩個數(shù)組對象是否完全相等方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了微信小程序彈窗組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了微信小程序自定義toast的實現(xiàn)代碼,本文以toast為例通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
electron項目中實現(xiàn)視頻下載保存到本地的方式
這篇文章主要介紹了electron項目中實現(xiàn)視頻下載保存到本地的兩種實現(xiàn)方式,每種方式結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-07-07