摘要:如何使用Ajaxtoolkit的ModalPopup元件遮蔽畫面,並詢問使用者的意見
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
當然使用ajaxtoolkit的元件一定要加入Script manager囉,並且一定要import AjaxControlToolkit的動作,
注意ModalPopupExtender的屬性設定!
用來屏蔽畫面的panel應該沒甚麼需要解說的,只是很簡單的html語法而已
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<form runat="server" id="form1" >
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Linkbutton ID="lbtnModShow" runat="server" Text="ShowPanel" />
<asp:panel id="panelMod" style="display: none" runat="server">
<div class="HellowWorldPopup">
<div class="PopupHeader" id="PopupHeader">Header</div>
<div class="PopupBody">
<p>This is a simple modal dialog</p>
</div>
<div class="Controls">
<input id="btnModOK" type="button" value="Done" />
<input id="btnModClose" type="button" value="Cancel" />
</div>
</div>
</asp:panel>
<cc1:ModalPopupExtender ID="modEX1" runat="server" BackgroundCssClass="modBack" BehaviorID="modEX1"
DropShadow =true OkControlID ="btnModOK" CancelControlID="btnModClose"
runat="server" PopupControlID="panelMod" TargetControlID="lbtnModShow" OnOkScript="goToDefault()" ></cc1:ModalPopupExtender>
</form>
以及這個panel相關的css,.modBack這個css,會套用在modalpopup元件遮蔽畫面的顏色還有透明度
而.HellowWorldPopup這個css只是用來決定跳出來的panel的寬度還有高度而已
.modBack{ background-color:#666699; filter:alpha(opacity=50); opacity:0.7; } .HellowWorldPopup { min-width:200px; min-height:150px; background:white; }
javascript的部分,panelShow()就是透過javascript的方式,呼叫modalpopup是否顯示
而goToDefault()就是當你在panel按下OK的時候,會執行甚麼樣的javacript
function panelShow() {
$find('<%=modEX1.ClientID %>').show();
}
function goToDefault() {
__doPostBack('<%= lbtnModShow.UniqueID %>', '');
}