本文 Bilal Haidar 將帶領您如何使用DIV元素來創建彈出的窗體,這種彈出即可以包含簡單的HTML元素也可以包含ASP.NET服務器控件,而且在實現過程中沒有使用傳統的window函數和showModalDialog / showModelessDialog函數(傳統的我們使用 window.open,或者showModalDialog 這樣的函數來制作彈出窗口--天天注釋)
最近我在用ASP.NET1.1技術來開發一個窗體,該窗體包含由三個控件組成的一個面板集合,這個面板用來顯示系統信息.可以假想這些控件是一些簡單的下拉框,當第一個下拉框選取後,第二個下拉框的值將顯示被第一個過濾的結果,同樣第三個下拉框將根據第二個下拉框的選擇而進行改變顯示。
窗體的這個技術通常被用來讓終端客戶那些不知道ASP.NET技術的人員獲取更好的用戶體驗。
當決定使用這些控件的替代品使用時,您是否用過dropdownlist或者是具有彈出窗體功能的Textbox控件?
好了,我們已經有了一個很好的解決方案:使用TextBox控件並掛鉤OnClick事件來觸發DIV彈出窗體,包括使用Listbox控件來選擇數據的值
一個不使用任何常規popup窗體或者過時的Dropdownlist來完成這個功能
THE HTML WebForm
我們已經建立了一個簡單的WebForm,他包含了一些TextBox,每一個TextBox已經附加了OnClick事件，用一段javascript代碼來彈出窗體，代碼如下：
<%@ Page language="c#"
Codebehind="ParentPage.aspx.cs" AutoEventWireup="false"
Inherits="PopupWithDiv.ParentPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Parent Page</title>
<LINK href="main.css" type="text/css" rel="stylesheet">
<script src="jsPopup.js" type="text/javascript"></script>
<script language="javascript">
<!--
// Prevent users from typing any text
// into the Textbox
function ProtectBox(e)
{return false; }
//-->
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<!-- Header Section -->
<div id="header">
<p>Popup Window with DIV Layer</p>
</div>
<!-- Body Section -->
<div id="content">
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td><label for="txtCountry">Country :</label></td>
<td><asp:TextBox
id="txtCountry" runat="server" OnKeyDown="return
ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"></asp:TextBox></td>
<td width="50"></td>
<td><label for="txtCity">City :</label></td>
<td><asp:TextBox
id="txtCity" runat="server" OnKeyDown="return
ProtectBox(event);" OnClick="PopupArea(event, 'divCity')"></asp:TextBox></td>
</tr>
</table>
</div>
<%-- Country --%>
<div class="popupWindow" id="divCountry">
<table cellSpacing="0" cellPadding="0" width="100%" bgColor="#2557ad" border="0">
<tr>
<td align="right"><span style="CURSOR: hand"
onclick="jsAreaClose('divCountry')"><img alt="Hide Popup" src="close.gif"
border="0"></span></td>
</tr>
<tr>
<td>
<asp:ListBox id="lstCountry" runat="server" AutoPostBack="True" width="100%"
rows="10"></asp:ListBox></td>
</tr>
</table>
</div>
<%-- City --%>
<div class="popupWindow" id="divCity">
<table
cellSpacing="0" cellPadding="0" width="100%"
bgColor="#2557ad" border="0">
<tr>
<td align="right"><span style="CURSOR: hand" onclick="jsAreaClose('divCity')"><img alt="Hide Popup" src="close.gif" border="0"></span></td>
</tr>
<tr>
<td>
<asp:ListBox id="lsCity" runat="server" AutoPostBack="True" width="100%" rows="10"></asp:ListBox> </td>
</tr>
</table>
</div>
</form>
</body>
</HTML>
