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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
小程序实现录音功能
Sep 22 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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 实用代码收集
2010/01/22 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python实现像awk一样分割字符串
2020/09/15 Python
大学生实习期自我评价范文
2013/10/03 职场文书
网络教育毕业生自我鉴定
2013/10/10 职场文书
水利水电专业自荐信
2014/07/08 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python