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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
详解React之key的使用和实践
Sep 29 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 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
phpmyadmin操作流程
2006/10/09 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
Js四则运算函数代码
2012/07/21 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python二分查找详解
2015/09/13 Python
Python OS模块实例详解
2019/04/15 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
中学劳技课教师的自我评价
2014/02/05 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
暑期学习心得体会
2014/09/02 职场文书
甘南现象心得体会
2014/09/11 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2015年技术员工作总结
2015/04/10 职场文书
公司地址变更通知
2015/04/25 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书