js登录弹出层特效


Posted in Javascript onMarch 07, 2014
<!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 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 #Javascript
js定时器(执行一次、重复执行)
Mar 07 #Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 #Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 #Javascript
JS调试必备的5个debug技巧
Mar 07 #Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 #Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 #Javascript
You might like
php array_intersect()函数使用代码
2009/01/14 PHP
php中设置多级目录session的问题
2011/08/08 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
基于python3的socket聊天编程
2020/02/17 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
python实现批量修改文件名
2020/03/23 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
简单的命令查看安装的python版本号
2020/08/28 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
本科生详细的自我评价
2013/09/19 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
气象学专业个人求职信
2014/03/15 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
《观舞记》教学反思
2014/04/16 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
公司慰问信范文
2015/03/23 职场文书
初中生物教学反思
2016/02/20 职场文书