Ryan的blog

首先宣告  ModalPopupExtender 的觸發控制項

<asp:Label ID="lblHide" runat="server"></asp:Label>

                           <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lblHide"
                                           BackgroundCssClass="modalBackground" CancelControlID="imgBtnCancel" PopupControlID="PanelModal">
                                            </asp:ModalPopupExtender>

利用一個隱藏的Label 去綁ModalPopupExtender

TargetControlID="lblHide" --觸發控制項id

CancelControlID="imgBtnCancel"--關閉控制項id

PopupControlID="PanelModal"--顯示的區塊

建議不要綁定OkControlID 這樣就可以在確定按鈕的事件做你想做的程式判斷

<asp:Panel ID="PanelModal" runat="server"  BackgroundCssClass="modalBackground" >
                            <asp:ImageButton ID="imgBtnOk" runat="server" Height="56px"
                                ImageUrl="~/images/Ok.png" ToolTip="確認" Width="59px" />

                            <asp:ImageButton ID="imgBtnCancel" runat="server" Height="46px"
                                ImageUrl="~/images/Cancel.png" ToolTip="取消" Width="48px" />

...................想在區塊呈現的控制項

</asp:Panel>

之後在你要顯示ModalPopupExtender 的控制項事件中

Protected Sub GvAudite_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GvAudite.RowCommand
       /*可以先控制區塊中控制項要顯現的資料*/

        //再將區塊顯現
        ModalPopupExtender1.Show()
End Sub

CSS部分:

<style type="text/css">
    .modalBackground{
        background-color:#000000;
        filter:alpha(opacity=100); --------可以調整透明度
        opacity:0.5;
    }
    </style>

在區塊中按OK控制項的事件中

Protected Sub  imgBtnOk_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles imgBtnOk.Click

/*可以控制區塊中控制顯現的資料*/

//若要讓此區塊不消失，繼續上面所做的控制項的資料呈現

//再加上ModalPopupExtender1.Show()

//讓此區塊持續呈現

End Sub

最後設定  asp:Panel  加上  style="display:none "