2010年6月7日 星期一

利用ajaxcontroltoolkit:ModalPopupExtender於網頁中彈出小視窗強制等待使用者回應的使用方法

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",否則會造成異常現象

沒有留言:

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器