AJAX扩展控件ModalPopupExtender(弹出模式对话框)的使用方法总结

来源：互联网发布：淘宝主播师洋编辑：程序博客网时间：2024/05/07 03:13

如图所示弹出Web的模式窗体：

页面代码：

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .bgcss { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" Height="167px" Width="190px"　BackColor="#d0F7DE"> <br /> <asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="137px"> <asp:ListItem>看书</asp:ListItem> <asp:ListItem>上网</asp:ListItem> <asp:ListItem>洗衣服</asp:ListItem> <asp:ListItem>出去玩</asp:ListItem> </asp:RadioButtonList> <asp:Button ID="Button2" runat="server" Text="确定" OnClick ="Button2_Click" /> <asp:Button ID="Button3" runat="server" Text="取消" /> </asp:Panel> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" DropShadow="true" OkControlID="Button2" CancelControlID="Button3" Drag="true" BackgroundCssClass="bgcss" PopupDragHandleControlID="Panel2" > </cc1:ModalPopupExtender> <asp:Panel ID="Panel2" runat="server" Height="83px" Width="187px"> 今天都要做些什么？<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /> <asp:Button ID="Button1" runat="server" Text="查看" /></asp:Panel> </div></form></body></html>

注意：使用了CSS的样式，并且要设置弹出对话框的背景色（上例中指的是Panel1）

属性说明：
属性    说明
TargetControlID                   用来控制弹出窗口的控件ID
BackgroundCssClass 弹出模式对话框时文档背景样式
CancelControlID                  取消模式对话框的按钮ID（这个按钮应该在模式对话框里面）
Drag                                   设置对模式对话框是否可以拖拽
DropShadow                  设置对模式对话框是否可以有阴影
HighlightBackColor                  下拉菜单的背景颜色
OkControlID                  确定模式对话框的控件ID
OnCancelScript                  单击取消按钮时执行（客户端）javascirpt函数
OnOKScript                  单击确定按钮时执行（客户端）javascirpt函数
PopupDragHandleControlID 拖拽处理的PanelID
X                                    弹出“模式”时的 X 坐标
Y                                    弹出“模式”时的 Y 坐标
PopupControlID                   模式对话框的Panel ID