js登录弹出层特效

2014-03-07 21

<!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=utf-8" /> 
<title>js登录弹出层 登录框特效</title> 
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="/jscss/demoimg/201310/thickbox_plus.js"></script> 
<style> 
body{background-color: #fff;} 
html, body{height: 100%;} 
html body{font: 12px Arial, Helvetica, sans-serif;color: #333333} 
html>body{font: 12px Arial, Helvetica, sans-serif;color: #333333} 
#TB_overlay{position: absolute;top: 0;left: 0;z-index: 100;width: 100%;height: 100%;background-color: #CCC;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;} 
#TB_window{top: 0px;left: 0px;position: fixed;_position: absolute;background: #fff;z-index: 102;color: #000000;display: none;border: 5px solid #666;} 
#TB_caption{height: 25px;padding: 10px 30px 10px 25px;} 
#TB_closeWindow{height: 25px;padding: 10px 25px 10px 0;float: right;} 
#TB_closeAjaxWindow{padding: 5px 10px 7px 0;margin-bottom: 1px;text-align: right;background-color: #e8e8e8;} 
#TB_ajaxContent{padding: 2px 15px 15px 15px;overflow: auto;} 
#TB_load{text-align: center;position: absolute;top: 50%;left: 0px;width: 100%;overflow: visible;visibility: visible;display: block;z-index: 101;} 
#TB_loadContent{margin-left: -125px;position: absolute;top: -50px;left: 50%;width: 250px;height: 100px;visibility: visible;} 
</style> 
</head> 
<body> 
<a href="/jscss/demoimg/201310/ShowLogin.html?height=160;width=400" title="登录后方可进行操作" class="thickbox" >马上登录</a> 
</body> 
</html>

JavaScript点击弹出层,点击后弹出一个登录层,jQuery版本1.6.2,在这个层内的内容调用了一个示例页面,原理基于thickbox_plus.js,thickbox大多被用于显示放大图片,用在这里也挺新颖哦,请注意文件路径,所需要的js文件一般在jscss/demoimg/201310目录下,图片可在页面上点击右键另存为。
展开阅读全文

更多Javascript文章

Firefox outerHTML实现代码
Jun 04 27
jQuery输入城市查看地图使用介绍
May 08 19
JavaScript执行顺序详细介绍
Dec 04 19
JavaScript中实现异步编程模式的4种方法
Sep 24 27
JavaScript设置获取和设置属性的方法
Mar 04 24
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 26
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 20
手机访问当前页面