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>