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 相关文章推荐
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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 array_intersect()函数使用代码
2009/01/14 PHP
php中的观察者模式
2010/03/24 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python实现IOU计算案例
2020/04/12 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python -v 报错问题的解决方法
2020/09/15 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
自主招生专家推荐信
2015/03/26 职场文书
车辆管理制度范本
2015/08/05 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书