复制代码代码如下 :
<!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">
<tête>
<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>
corps{couleur de fond : #fff;}
html, corps{hauteur : 100 % ;}
corps html{police : 12px Arial, Helvetica, sans-serif ; couleur : #333333}
html>corps{police : 12px Arial, Helvetica, sans-serif;couleur : #333333}
#TB_overlay{position : absolue;haut : 0;gauche : 0;z-index : 100;largeur : 100 %;hauteur : 100 %;couleur d'arrière-plan : #CCC;filtre : alpha(opacité=60);-moz- opacité : 0,6 ;opacité : 0,6 ;}
#TB_window{haut : 0px;gauche : 0px;position : fixe;_position : absolue;arrière-plan : #fff;z-index : 102;couleur : #000000;affichage : aucun;bordure : 5 px solide #666 ;}
#TB_caption{hauteur : 25 px ; remplissage : 10 px 30 px 10px 25px ;}
#TB_closeWindow{hauteur : 25px;remplissage : 10px 25px 10px 0;float : droite;}
#TB_closeAjaxWindow{padding : 5px 10px 7px 0;margin-bottom : 1px;text-align : right;background-color : #e8e8e8;}
#TB_ajaxContent{padding : 2px 15px 15px 15px;débordement :auto;}
#TB_load{text-align : center;position : absolue;top : 50 %;gauche : 0px;largeur : 100 %;débordement : visible;visibilité : visible;affichage : bloc;z-index : 101 ;}
#TB_loadContent{margin-left : -125px;position : absolue;haut : -50px;gauche : 50 %;largeur : 250px;hauteur : 100px;visibilité : visible ;}
</style>
</tête>
<corps>
<a href="/jscss/demoimg/201310/ShowLogin.html?height=160;width=400" >马上登录</a>
</corps>
</html>
JavaScript a été créé, jQuery est 1.6.2 et jQuery est une version 1.6.2.这个层内的内容调用了一个示例页面，原理基于thickbox_plus.js，thic kbox大多被用于显示放大图片，用在这里也挺新颖哦，请注意文件路径，所需要的js文件Le jscss/demoimg/201310目录下，图片可在页面上点击右键另存为。