本文介绍如何使用 ASP.NET 中的 ModalPopup 扩展器创建模态对话框，展示具体代码示例及配置参数说明。
ModalPopup扩展器控件能够在网页中模拟一个“模态”对话框，即当该对话框出现时，页面中所有的其他控件将不可用，用户只有在对该模态对话框进行响应之后才能返回并使用页面中的其他控件。
示例运行效果：
图(1)
图(2)
图(3)
ModalPopupDemo.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupDemo.aspx.cs" Inherits="Chapter08_ModalPopupDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head 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: 66px;
}
.modalBackground
{
background-color: #ddd;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="ModalPopupForm" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<div class="demoheading">网页中的模态对话框</div>
<asp:LinkButton ID="lbtnAdvancedOperation" runat="server">执行高级操作</asp:LinkButton>
<asp:Panel ID="confirmPanel" runat="server" CssClass="confirmPanel" Style="display:none;">
<div style="height:48px">
<b>用户登录</b><br /><br />该功能只提供给登录用户，您是否要登录？
</div>
<div style="text-align:center;">
<asp:Button ID="btnOK" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
TargetControlID="lbtnAdvancedOperation"
PopupControlID="confirmPanel"
DropShadow="true"
BackgroundCssClass="modalBackground"
OkControlID="btnOK"
OnOkScript="window.location = 'Login.aspx'"
CancelControlID="btnCancel" />
<!--
TargetControlID：该扩展器目标控件ID。点击该控件将显示出模态对话框
PopupControlID：用来作为模态对话框显示的Panel控件的ID
BackgroundCssClass：当该模态对话框出现在页面中时，页面的其他部分将被一个半透明的层所覆盖，
该属性即可指定该层的样式
DropShadow：若该属性值设置为true，则将让模态对话框显示出阴影效果
OkControlID：PopupControlID属性所指定的作为模态对话框的Panel控件中的实现确认功能的按钮的ID
OnOkScript：当用户点击OkControlID属性所指定的确认按钮之后，将执行的客户端脚本
CancelControlID：PopupControlID属性所指定的作为模态对话框的Panel控件中的实现取消功能的按钮的ID
OnCancelScript：当用户点击CancelCOntrolID属性所指定的取消按钮之后，将执行的客户端脚本
X：模态对话框左上角相对屏幕左上角的水平坐标。若不指定该属性，模态对话框将水平居中显示
Y：模态对话框左上角相对屏幕左上角的垂直坐标。若不指定该属性，模态对话框将垂直居中显示
-->
</form>
</body>
</html>
示例运行效果：
图(1)
图(2)
图(3)
ModalPopupDemo.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupDemo.aspx.cs" Inherits="Chapter08_ModalPopupDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head 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: 66px; } .modalBackground { background-color: #ddd; filter:alpha(opacity=70); opacity:0.7; } </style></head><body> <form id="ModalPopupForm" runat="server"> <asp:ScriptManager ID="sm" runat="server" /> <div class="demoheading">网页中的模态对话框</div> <asp:LinkButton ID="lbtnAdvancedOperation" runat="server">执行高级操作</asp:LinkButton> <asp:Panel ID="confirmPanel" runat="server" CssClass="confirmPanel" Style="display:none;"> <div style="height:48px"> <b>用户登录</b><br /><br />该功能只提供给登录用户，您是否要登录？ </div> <div style="text-align:center;"> <asp:Button ID="btnOK" runat="server" Text="OK" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </div> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="lbtnAdvancedOperation" PopupControlID="confirmPanel" DropShadow="true" BackgroundCssClass="modalBackground" OkControlID="btnOK" OnOkScript="window.location = 'Login.aspx'" CancelControlID="btnCancel" /> <!-- TargetControlID：该扩展器目标控件ID。点击该控件将显示出模态对话框 PopupControlID：用来作为模态对话框显示的Panel控件的ID BackgroundCssClass：当该模态对话框出现在页面中时，页面的其他部分将被一个半透明的层所覆盖， 该属性即可指定该层的样式 DropShadow：若该属性值设置为true，则将让模态对话框显示出阴影效果 OkControlID：PopupControlID属性所指定的作为模态对话框的Panel控件中的实现确认功能的按钮的ID OnOkScript：当用户点击OkControlID属性所指定的确认按钮之后，将执行的客户端脚本 CancelControlID：PopupControlID属性所指定的作为模态对话框的Panel控件中的实现取消功能的按钮的ID OnCancelScript：当用户点击CancelCOntrolID属性所指定的取消按钮之后，将执行的客户端脚本 X：模态对话框左上角相对屏幕左上角的水平坐标。若不指定该属性，模态对话框将水平居中显示 Y：模态对话框左上角相对屏幕左上角的垂直坐标。若不指定该属性，模态对话框将垂直居中显示 --> </form></body></html>
扫一扫
1189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
