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" onclick="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" onclick="btnBack_Click" Text="取消" />
</td>
</tr>
</tr>

</tr>


</table>




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

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

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