C#ModalPopupExtender相关

今天在帮学长做一个项目的下手的时候、

第一次遇见ModalPopupExtender这个控件、于是在经一番研究后、终于会基本使用、

现整理一些ModalPopupExtender该控件的相关知识、希望对asp.net初学者有帮助。

常用属性：

      TargetControlID：用于触发弹出面板的控件。
      OkControlID：弹出面板中的确认按钮，用于确认新的样式。
       OnOkScript：当单击确认按钮后，关闭样式面板后，执行脚本。
      CancelControlID：样式面板中的取消按钮，用于取消应用样式。
      PopupDragHandleControlID：样式面板中用于触发面板的控件。
      DropShadow：样式面板是否有阴影。值为True，则有阴影；值为False，则没有阴影。
      BackgroundCssClass：样式面板中应用的css样式。

下面 举个栗子

点击右上角的添加button 、就会变成如下的界面

可见、该控件的作用之一就是可以省去网页之间的跳转的麻烦、而直接在该网页上进行一个弹窗功能的实现、

通过这个功能、可以实时的进行添加修改等操作、

        <asp:Label ID="lblPopup" runat="server"></asp:Label>
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lblPopup"
            BackgroundCssClass="modal" Drag="true" PopupControlID="Panel1">
        </cc1:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" CssClass="modalBox" 
            Style="display: none"  width="80%">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"  >
                <ContentTemplate>
           
                 <table class="TableCss"  frame="vsides" style="display: block" width="100%">
                        <tr>
                            <td colspan="6" class="style18">
                                <asp:Label ID="lblTitle" runat="server" Font-Size="Medium"></asp:Label>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              
                            </td>
                             
                        </tr>
                            <tr>


                               <td colspan="6" class="style23" align="center">
                                <asp:Label ID="Label3" runat="server" Text="添加个人信息" Font-Names="宋体"></asp:Label>
                            </td>
                             
                        </tr>
                        <tr>
                           
                             <td class="style31">
                                参数名称：
                            </td>
                            <td class="style35">
                               <asp:TextBox ID="txtAddname" runat="server" Width="95%" ></asp:TextBox>
                            </td>


                             <td class="style32">
                                单位：
                            </td>
                               <td class="style35">
                               <asp:TextBox ID="txtUnit" runat="server" Width="95%"  ></asp:TextBox>
                            </td>
                        
                            <tr>
                                <td class="style37">数量规格： </td>
                                <td class="style39">
                                    <asp:TextBox ID="txtNum" runat="server" Width="95%"></asp:TextBox>
                                </td>
                                <td class="style32">定义和说明： </td>
                                <td class="style36">
                                    <asp:TextBox ID="txtDef" runat="server" Width="95%"></asp:TextBox>
                                </td>
                                <td class="style32">备注： </td>
                                <td class="style36">
                                    <asp:TextBox ID="txtother" runat="server" Width="95%"></asp:TextBox>
                                </td>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td align="center" class="style26" colspan="2">
                                        <asp:Button ID="btnOK" runat="server" CssClass="btnCss" οnclick="btnOK_Click" Text="确认" />
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
                                    <td>
                                        <asp:Button ID="btnBack" runat="server" CausesValidation="false" CssClass="btnCss" οnclick="btnBack_Click" Text="取消" />
                                    </td>
                                </tr>
                            </tr>
                        
                          </tr>


                    </table>




                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>

很多网站的某些弹窗登陆界面等都是采用 该控件、

特别要注意一下的就是为Panel设置Style="display: none"