1. 放置一個ASP PANEL,裡面是前景要顯示的內容,預設為不顯示
<asp:Panel ID="pResult" runat="server" Style="display: none" Width="610px" Height="470px" CssClass="modalPopup">...</asp:Panel>
CssClass:指定前景CSS,一般可使用下面設定
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
2. 放置假的按鈕,提供給ModalPopupExtender 的TargetControlID
<asp:Button ID="ButtonModalPopupExtender" runat="server" Style="display: none" />
3. 放置ModalPopupExtender
<ajaxTool:ModalPopupExtender TargetControlID="ButtonModalPopupExtender" runat="server" ID="ModalPopupExtender1" OkControlID="Button切割完成"
PopupControlID="pResult" DropShadow="True" BehaviorID="modelMsg" BackgroundCssClass="modalBackground">
</ajaxTool:ModalPopupExtender>
TargetControlID:指定觸發顯示內容的按鈕,若要讓程式來決定何時顯示則榜定給假的按鈕並將按鈕隱藏
OkControlID:指定觸發確認事件並隱藏內容的按鈕
PopupControlID:指定前景物件,通常為ASP PANEL
DropShadow:指定是否要有陰影效果
BackgroundCssClass:指定背景的CSS,一般可使用下面的設定
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
4. 以程式控制顯示前景
呼叫ModalPopupExtender1.Show()
注意:PANEL 跟 BUTTON 不顯示的方法不能使用visible="false",而要使用Style="display: none",否則會造成異常現象
沒有留言:
張貼留言