TinyBox列子

最新推荐文章于 2024-04-24 21:48:28 发布

zwt2001267

最新推荐文章于 2024-04-24 21:48:28 发布

阅读量190

点赞数

文章标签： JavaScript XHTML CSS HTML ViewUI

本文链接：https://blog.csdn.net/zwt2001267/article/details/83772362

版权

<!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="js/tinybox.js"></script>
</head>

<body>
<div class="box">
<h3>酷酷的弹出层</h3>
<div class="title">加载一个静态页面<a class="a_blue" href="#zhangxinxu" id="click_test1">效果预览</a></div>
<div class="content">加载一个静态页面，这里可能无法测试出来，在服务器项目里可以看见效果</div>
<div class="title">图片<a class="a_blue" href="#zhangxinxu" id="click_test2">效果预览</a></div>
<div class="content">用酷酷的浮动层显示图片</div>
<div class="title">自动隐藏<a class="a_blue" href="#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啦。其他用法见示例代码了。

页面效果预览

js文件下载