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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
手机号码,密码正则验证
Sep 04 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
使用JavaScript破解web
Sep 28 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中日期加减法运算实现代码
2011/12/08 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
Javascript之String对象详解
2016/06/08 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python sys模块常用方法解析
2020/02/20 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
python如何查看安装了的模块
2020/06/23 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Java设计模式之代理模式
2022/04/22 Java/Android