kevinya

 

<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 %>', '');
        }