alert弹出层(待完善……)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._Default" %>
<!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>无标题页</title>
<style type="text/css">
.alert
{
background-color: lightgray;
position: absolute;
filter: Alpha(Opacity="50",FinishOpacity="75",2);
z-index: 99;
top: 0px;
left: 0px;
}
.b
{
background-image: url("img/asyncbox_tipsbar_bg.gif");
}
.alertDiv
{
position: absolute;
}
</style>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnAlert").live("click", function() {
btnAlert("您确定要关闭吗?");
$("#mav").find("a").andSelf().show().css("width", $(window).width())
.css("height", $(document).height());
$("#alertDiv").position(($(document).height() - $("#alertDiv").height()) / 2, ($(document).width() - $("#alertDiv").width()) / 2);
});
});
function btnAlert(mes) {
var divModel = "<div id='alertDiv' style='width: 300px; margin: 0 auto;'><div style='background-color: Blue; height: 25px;'><div id='close' style='float: right; color: White; font-weight: bold; font-size: 13pt;' > X </div> </div> <div style='height: 250px; background-color: lightGray'> </div> </div>";
$("<div id='mav' class='alert'><div id='alertDiv' style='width: 300px; margin: 0 auto; margin-top:200px;' ><div style='background-color: Blue; height: 25px;'><div id='close' style='float: right; color: White; font-weight: bold; font-size: 13pt;' >X</div></div><div style='height: 250px; background-color: lightGray' class='b'> <div id='content' style='top: 0; height: 90%'></div><div style='bottom: 0; text-align: center;'><input id='btnOK' type='button' value='OK' /><input id='btnCancel' type='button' value='Cancel' /></div></div></div></div>")
.appendTo($("body"));
$("#close").live("click", function() {
$(".alert").find("div").andSelf().remove();
return false;
});
$("#content").html("<b>" + mes + "</b>");
$("#btnOK").live("click", function() {
$(".alert").find("div").andSelf().remove();
return true;
});
$("#btnCancel").live("click", function() {
$(".alert").find("div").andSelf().remove();
return false;
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<%-- <Triggers>
<asp:AsyncPostBackTrigger EventName="timer_Elapsed" ControlID="Button1" />
</Triggers>--%>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<input id="btnAlert" type="button" value="btnAlert" />
</form>
</body>
</html>