jquery ajax 酷酷的很炫的弹出层效果

jquery ajax 酷酷的很炫的弹出层效果 


2011-02-01 11:05:21|  分类: ASP.NET
|  标签:
|字号 订阅





如下图:

jquery ajax 酷酷的很炫的弹出层效果_第1张图片


层里面可以放图片,DIV层什么都能放,甚至直接页面都可以放


以下是测试代码:


<!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>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>酷酷的弹出层</title>
<style
type="text/css">
body{background:#eeeeee;
font-size:63%;}
.box{width:70%; padding:30px; margin:0 auto;
background:#ffffff; border:1px solid #cccccc;}
h3{font:bold 1.6em/2em
"宋体";}
.title{padding:0.8em 0 0.8em 1em; background:#eeeeee; border:1px solid
#d0d0d0; font-size:1.4em; font-weight:bold; margin:20px auto
15px;}
.content{margin:0; line-height:1.5;
font-size:1.2em;}
.a_blue{color:#0066CC; font-size:0.9em; font-weight:normal;
margin-left:30px;}
.a_blue:hover{color:#009999; text-decoration:none;}


#tinybox{position:absolute; display:none; padding:10px; background:#ffffff
url(image/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3;
z-index:2000}
#tinymask{position:absolute; display:none; top:0; left:0;
height:100%; width:100%; background:#000000;
z-index:1500}
#tinycontent{background:#ffffff;
font-size:1.2em;}
</style>
<script type="text/javascript"
src="http://xdeduzb.blog.163.com/blog/js/tinybox.js"></script>
</head>


<body>
<div
class="box">
<h3>酷酷的弹出层</h3>
<div
class="title">加载一个静态页面<a class="a_blue"
href="http://xdeduzb.blog.163.com/blog/#zhangxinxu"
id="click_test1">效果预览</a></div>
<div
class="content">加载一个静态页面,这里可能无法测试出来,在服务器项目里可以看见效果</div>
<div
class="title">图片<a class="a_blue"
href="http://xdeduzb.blog.163.com/blog/#zhangxinxu"
id="click_test2">效果预览</a></div>
<div
class="content">用酷酷的浮动层显示图片</div>
<div class="title">自动隐藏<a
class="a_blue" href="http://xdeduzb.blog.163.com/blog/#zhangxinxu"
id="click_test3">效果预览</a></div>
<div
class="content">层显示一段时间后自动隐藏,当作提示用是个很不错的选择</div>
</div>
<script
type="text/javascript">
T$('click_test1').onclick =
function(){TINY.box.show('word-mix-widh-auto-btn.html',1,300,150,1)}
var
content2 = "<img width='600' height='480'
src='http://lh3.ggpht.com/_ZR4fYJ5mtLI/SjJ5bx9BsUI/AAAAAAAAABU/LRHBRkU1wdA/s512/PICX.jpg'
border='0' />";
T$('click_test2').onclick =
function(){TINY.box.show(content2,0,0,0,1)}
var content3 =
"该浮动层将在3秒钟内消失。";
T$('click_test3').onclick =
function(){TINY.box.show(content3,0,0,0,0,3)}
</script>
</body>
</html>


调用一个名为tinybox的js就ok啦。其他用法见示例代码了。

你可能感兴趣的:(jquery ajax 酷酷的很炫的弹出层效果)