Microsoft AjaxToolkits 23. ModalPopup控件

ModalPopup控件弹出式控件最大的特色就是弹出具备“模式”窗口风格。类似于WINDOWS关机对话框模式。

属性列表:
TargetControlID 点击后出现对话框的控件,一般为按钮控件
PopupControlID 对话框中的Panel的id
BackgroundCssClass 背景的css
DropShadow 对话框是否有阴影效果
OkControlID Ok按钮的id
OnOkScript Ok按钮触发脚本
CancelControlID Cancel按钮的id
OkCancelScript Cancel按钮触发脚本
PopupDragHandleControlID Panel的中的标题栏,可以拖动,一般也是Panel
X 出现时,顶部的位置。
Y 出现时,左边的位置。


常见问题及使用技巧:
常见问题:如何让OKControlID或CancelControlID属性所指定的按钮首先执行客户端JS代码,然后再回送至服务器执行服务器代码?
使用技巧:ModalPopup控件的OK和CANCEL按钮被设计为只处理客户端或者服务器端代码,因此如果指定了OnOkScript或OnCancelScrip,那么原Button的服务器端代码将被屏蔽。解决方法在要处里的方法内加入一条_doPostBack()模似一次回发。
常见问题:何时应该选择使用模态对话框给用户提示?
使用技巧:竟量少用。

实例解析一、简单应用实例
1.UI界面
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" Height="271px" Width="410px">
<asp:Panel ID="Panel2" runat="server" Height="187px" Width="305px">
<table style="width: 382px; height: 169px">
<tr>
<td colspan="3"><asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px">登陆窗口:</asp:Panel></td>
</tr>
<tr>
<td style="width: 100px; height: 70px">用户名:</td>
<td style="width: 100px; height: 70px"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
<td style="width: 100px; height: 70px"></td>
</tr>
<tr>
<td style="width: 100px; height: 58px">密码:</td>
<td style="width: 100px; height: 58px"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
<td style="width: 100px; height: 58px"><asp:Button ID="Button1" runat="server" Text="登陆" />
<asp:Button ID="Button2" runat="server" Text="取消" /></td>
</tr>
</table>
</asp:Panel>
<asp:LinkButton ID="LinkButton1" runat="server">点击登陆</asp:LinkButton></asp:Panel>
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="Button2"
drag="True" dropshadow="True" okcontrolid="Button1" popupcontrolid="Panel2" popupdraghandlecontrolid="Panel3"
targetcontrolid="LinkButton1"></cc1:modalpopupextender>
</form>
</body>

实例二、简单应用实例二
<head id="Head1" runat="server">
<title>ModalPopup Demo</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.confirmPanel
{
border: 2px solid #ccc;
background-color: #fff;
padding: 15px;
width: 230px;
height: 50px;
}
.modalBackground
{
background-color: #ddd;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:LinkButton ID="lbtnAdvancedOperation" runat="server">执行高级操作</asp:LinkButton>
<asp:Panel ID="confirmPanel" runat="server" CssClass="confirmPanel" Style="display: none">
<div style="height: 30px">该功能只提供给登录用户,您是否要登录?</div>
<div style="text-align: center;">
<asp:Button ID="btnOK" runat="server" Text="OK"></asp:Button>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe" TargetControlID="lbtnAdvancedOperation"
PopupControlID="confirmPanel" BackgroundCssClass="modalBackground" OkControlID="btnOK"
OnOkScript="window.location = 'login.aspx'" CancelControlID="btnCancel" runat="server" />
</form>
</body>

posted @ 2012-05-24 23:08  烧点饭  阅读(129)  评论(0编辑  收藏  举报