吉米.NET

屬性	說明
CancelControlID	取消控制項ID
Drag	是否可拖曳(預設false)
DropShadow	是否有陰影(預設false)
OkControlID	確定控制項ID
OnOkScript	觸發"確認"事件(前端)
OnCancelScript	觸發"取消"事件(前端)
PopupControlID	彈出視窗的控制項ID
PopupDragHandleControlID	可拖曳的控制項ID
TargetControlID	觸發彈出視窗的控制項ID
X	彈出視窗x座標位置(預設置中)
Y	彈出視窗y座標位置(預設置中)
Animations	效果展示(範例只做淡出)
BackgroundCssClass	CSS背景處理

 

CSS:

        #pnlDialog
        {
           background-color:White;
           border:2px solid green;
           width:300px;
        }
        #pnlDialog .cTitle
        {
            cursor:move;
            padding:5px;
            margin:5px;
            background-color:Black; 
            color:White;  
            font-family:Courier New;
        }
        #pnlDialog .cContent
        {
           padding:5px;
           font-family:Courier New; 
           color:Red; 
        }
        #pnlDialog .cButton
        {
            padding: 10px 5px 5px 10px; 
            text-align:right;
        }
        .modalBackground
        {
            filter:alpha(opacity=70);   /*for IE*/
            opacity:0.7;    /*for Other*/
            background-color: #E0E0E0;
        }

HTML:

                
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />     
    <asp:Button ID="btnShow" runat="server" Text="範例" />

    <asp:Panel ID="pnlDialog" runat="server" >
        <asp:Panel id="pnlTitle" CssClass="cTitle" runat="server">標題</asp:Panel>
        <div id="divContent" class="cContent">內容區：提供了一個蠻好的解決方案，該網站可以根據你的需求，自動產生一些測試文字，亦可以儲存、下載成不同格式，如HTML、CSV、XLS、SQL、XML。</div>
        <hr />
        <div id="divButton" class="cButton">
        <asp:Button ID="btnOK" runat="server" Text="確定" />
        <asp:Button ID="btnCancel" runat="server" Text="取消" />
        </div>
    </asp:Panel>

    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                               TargetControlID="btnShow"
                               PopupControlID="pnlDialog"
                               PopupDragHandleControlID="pnlTitle"
                               DropShadow="true"
                               Drag="true"
                               OkControlID="btnOK" 
                               CancelControlID="btnCancel"
                               OnCancelScript="onCancel()"
                               OnOkScript="onOK()"
                               X="150" Y="100" >
        <Animations>
            <OnShown>
                <%-- Fade in when first displayed --%>
                <FadeIn Duration=".75" Fps="20" />                
            </OnShown>
        </Animations>
    </asp:ModalPopupExtender>

JavaScript:

    function onOK() {
        alert("It's OK");
    }
    function onCancel() {
        alert("It's Cancel");
    }
    //下面的程式碼是用來解決 FloatingBehavior 不允許我們將拖曳面板（DragPanel）固定於某處的問題。
     function setBodyHeightToContentHeight() {
        document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
    }
    setBodyHeightToContentHeight();
    $addHandler(window, "resize", setBodyHeightToContentHeight);

結果：