ModalPopupExtender的用法
新邮箱上永久删除邮件那个效果不错吧,今天就用ModalPopupExtender来实现类似的效果.
先看Aspx的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopup Demonstration.aspx.cs" Inherits="ProgressBehavior" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type ="text/javascript" >
function onCancel()
{
var aa=document.getElementById("TextBox1");
aa.value="你没有做任何操作!";
}
function onOk()
{
var ss=document.getElementById("DropDownList1");
document.getElementById("TextBox1").style.backgroundColor=ss.value;
document.getElementById("TextBox1").value="你选择了"+ss.value;
}
</script>
</head>
<body style="font-size: small">
<form id="form1" runat="server">
<atlas:ScriptManager ID="gsw" runat ="server" >
</atlas:ScriptManager>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
<cc1:ModalPopupProperties
TargetControlID="Button3"
PopupControlID="Panel3"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="Button1"
OnOkScript="onOk()"
CancelControlID="Button2"
OnCancelScript ="onCancel()"/>
</cc1:ModalPopupExtender>
<asp:Button ID="Button3" runat="server" Text="选择TextBox颜色" /><br />
<asp:TextBox ID="TextBox1" runat="server" Height="106px" Width="274px" ></asp:TextBox>
<br />
<br />
<div ID="Panel3" style=" background-color :skyblue " >
<table style="width: 124px">
<tr>
<td colspan="2" rowspan="2" style="vertical-align: top; height: 44px;">
<asp:DropDownList ID="DropDownList1" runat="server" Width="166px" Height="149px">
<asp:ListItem Value="Red">红色</asp:ListItem>
<asp:ListItem Value="Green">绿色</asp:ListItem>
<asp:ListItem Value="Blue">蓝色</asp:ListItem>
<asp:ListItem Value="NavajoWhite">不知道</asp:ListItem>
<asp:ListItem Value="Yellow">黄色</asp:ListItem>
<asp:ListItem Value="silver"></asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
</tr>
<tr>
<td style="height: 26px;" colspan="2">
<asp:Button ID="Button1" runat="server" Text="选择" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="取消" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
其中为个外联样式表
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
中的StyleSheet代码如下:
.modalBackground {
background-color:Gray;
filter:alpha(opacity=30);
opacity:0.7;
}
如果有兴趣,可以做的更靓点!自己处理!呵呵
《asp.net core精要讲解》 https://ke.qq.com/course/265696
《asp.net core 3.0》 https://ke.qq.com/course/437517
《asp.net core项目实战》 https://ke.qq.com/course/291868
《基于.net core微服务》 https://ke.qq.com/course/299524