jquery 实现提示框的滑入滑出效果

来源：互联网发布：php 代码压缩编辑：程序博客网时间：2024/06/04 20:31

感谢作者。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=" "/>

<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:01px5px #333;

-webkit-box-shadow:01px5px #333;

z-index: 101;

}

a.boxclose {

float: right;

width: 26px;

height: 26px;

background: transparent url(cancel.png)repeattopleft;

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>

jquery 实现 提示框的 滑入 滑出效果

jquery 实现提示框的滑入滑出效果