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库 开发规则
Jan 31 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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文本操作类
2006/11/25 PHP
php 时间计算问题小结
2009/01/04 PHP
PHP session有效期问题
2009/04/26 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
网页javascript精华代码集
2007/01/24 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python通过命令开启http.server服务器的方法
2017/11/04 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年质量工作总结
2014/11/22 职场文书