感谢作者。http://www.jquery001.com/jquery-overlay-with-slide-out-box.html
效果图:
小关闭按钮图片:
代码:
<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="WebForm3.aspx.cs"Inherits="webShiYan2.WebForm3" %>
<!DOCTYPEhtmlPUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="keywords"content=" "/>
<metaname="description"content=" "/>
<title></title>
<scriptsrc="jquery-1.7.js"type="text/javascript"></script>
<styletype="text/css">
.overlay {
background-color:gray;
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity: 0.5;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 30%;
right: 30%;
background-color:#fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #ccc;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow:01px 5px #333;
-webkit-box-shadow:01px 5px #333;
z-index: 101;
}
a.boxclose {
float: right;
width: 26px;
height: 26px;
background: transparent url(cancel.png)repeattop left;
margin-top: -30px;
margin-right:-30px;
cursor: pointer;
}
.img {
float: right;
}
</style>
<scripttype="text/javascript">
$(document).ready(function () {
$(function () {
$('#activator').click(function () {
$('#overlay').fadeIn('500',function () {
$('#box').animate({'top':'150px' }, 500);
});
});
$('#boxclose').click(function () {
$('#box').animate({'top':'-500px' }, 500, function () {
$('#overlay').fadeOut('500');
});
});
});
});
</script>
</head>
<body>
<aid="activator"href="#"class="demobuttonlightblue">点击查看效果</a>
<divclass="overlay"id="overlay"style="display:none;"></div>
<divclass="box"id="box">
<aclass="boxclose"id="boxclose"></a>
<h2>让我们继续努力,Let's Work Hard!</h2>
<imgclass="img"src="funny.jpg"alt="MOX"/>
<p>
这里显示我们给要提示用户的重要消息,可关闭消息框。
做程序员很累,大家注意休息,看看右边的图,^_^。大家继续加油吧,不然就成这个样子了,.NET是很有前途的。
</p>
</div>
</body>
</html>