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 相关文章推荐
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
element多个表单校验的实现
May 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/10/09 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
党校培训思想汇报
2014/01/03 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS