<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/jquery-1.7.1.min.js"></script>
<title></title>
<style type="text/css">
#tc
{position:fixed;
width:400px;
left:50%;
margin-left:-200px;
top:-500px;
border:1px solid navy;
box-shadow:0 0 10px #808080;
border-radius:10px 11px;
z-index:11;
}
#tc-top
{
width:100%;
height:30px;
background-color:navy;
color:white;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:30px;
border-radius:10px 11px;
}
#tc-bottom
{
position:relative;
width:100%;
height:40px;
}
#tc-btn1
{
position:absolute;
width:100px;
height:30px;
top:5px;
background-color:navy;
color:white;
text-align:center;
line-height:30px;
cursor:pointer;
left:50%;
margin-left:-50px;
}
#tc-btn1:hover
{
background-color:red;
color:green;
}
#tc-main
{
padding:20px;
text-align:center;
background-color:white;
}
#tc-zz
{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:black;
opacity:0.3;
display:none;
z-index:10;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="弹出" id="btn1"/>
<div id="tc">
<div id="tc-top">这里是标题</div>
<div id="tc-main">这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！</div>
<div id="tc-bottom">
<div id="tc-btn1">确定</div>
</div>
</div>
<div id="tc-zz"></div>
</form>
</body>
</html>
<script type="text/javascript">
$("#btn1").click(function () {
myalert(‘我是小倩‘,‘小倩：你好！！‘);
});
function myalert(t, c) {
$("#tc-top").text(t);
$("#tc-main").html(c);
$("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 300);
$("#tc-zz").css("display", "block");
}
$("#tc-btn1").click(function () {
$("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { $("#tc-zz").css("display", "none"); });
});
</script>
时间： 2024-10-31 06:38:04