复制代码代码如下：
<!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">
<头>
<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>
<风格>
正文{背景颜色：#fff;}
html, 正文{高度: 100%;}
html body{字体：12px Arial、Helvetica、sans-serif；颜色：#333333}
html>body{字体：12px Arial、Helvetica、sans-serif；颜色：#333333}
#TB_overlay{位置：绝对；顶部：0；左侧：0；z-index：100；宽度：100%；高度：100%；背景颜色：#CCC；过滤器：alpha（不透明度=60）；-moz-不透明度：0.6；不透明度：0.6；}
#TB_window{顶部：0px；左侧：0px；位置：固定；_位置：绝对；背景：#fff；z-index：102；颜色：#000000；显示：无；边框：5px实心#666；}
#TB_caption{高度：25px;填充：10px 30px 10px 25px;}
#TB_closeWindow{高度：25px；填充：10px 25px 10px 0；浮动：右；}
#TB_closeAjaxWindow{padding: 5px 10px 7px 0;margin-bottom: 1px;text-align: right;background-color: #e8e8e8;}
#TB_ajaxContent{填充：2px 15px 15px 15px;溢出：自动;}
#TB_load{文本对齐：中心；位置：绝对；顶部：50%；左侧：0px；宽度：100%；溢出：可见；可见性：可见；显示：块；z-index：101；}
#TB_loadContent{左边距：-125px；位置：绝对；顶部：-50px；左：50%；宽度：250px；高度：100px；可见性：可见；}
</风格>
</头>
<正文>
<a href="/jscss/demoimg/201310/ShowLogin.html?height=160;width=400" >立即登录</a>
</正文>
</html>
JavaScript点击弹出层，点击后弹出一个登录层，jQuery版本1.6.2，在这个层内的内容调用了一个示例页面，原理基于thickbox_plus.js，thickbox主要是用于显示放大图片，用这里也挺刚才哦，请注意文件路径，所需要的js文件一般在jscss/demoimg/201310目录下，图片可在页面上点击右键另存为。