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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
js中创建对象的几种方式
Feb 05 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
js中eval详解
2012/03/30 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python中方法链的使用方法
2016/02/23 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
市场营销毕业生自荐信
2013/11/23 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
校长先进事迹材料
2014/02/01 职场文书
学徒工职责
2014/03/06 职场文书
上海世博会口号
2014/06/19 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
元宵节晚会主持词
2015/07/01 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
详解运行Python的神器Jupyter Notebook
2021/06/03 Python