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动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
Vue-Router的使用方法
Sep 05 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 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实现的生成静态HTML速度快类库
2007/03/31 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
深入理解Python异常处理的哲学
2019/02/01 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
求职简历自荐信
2013/10/20 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2014年信用社工作总结
2014/11/25 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
银行工作心得体会范文
2016/01/23 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Golang map映射的用法
2022/04/22 Golang