js登录弹出层特效

 更新时间:2014年03月07日 15:07:30   作者:  
点击弹出层,点击后弹出一个登录层,在这个层内的内容调用了一个示例页面
复制代码 代码如下:

<!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目录下,图片可在页面上点击右键另存为。

相关文章

  • 使用js获取伪元素的content实例

    使用js获取伪元素的content实例

    下面小编就为大家带来一篇使用js获取伪元素的content实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js的回调函数详解

    js的回调函数详解

    本文主要介绍了个人对于javascript中回调函数的理解和使用方法及示例,需要的朋友可以参考下
    2015-01-01
  • 很酷的星级评分系统原生JS实现

    很酷的星级评分系统原生JS实现

    这篇文章主要weidajiaxiangxi介绍了很酷的星级评分系统原生JS实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • innerText innerHTML的用法以及注意事项 [推荐]

    innerText innerHTML的用法以及注意事项 [推荐]

    我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是:innerText,outerText,innerHTML,outerHTML,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。
    2009-05-05
  • Python要求每行输出5个的示例代码

    Python要求每行输出5个的示例代码

    本文从列表、字符串和数字三个方面详细阐述了Python中要求每行输出5个的相关内容,并给出了相应的代码示例,在实际开发中,我们可以根据具体的需求灵活运用这些方法,以提高程序的输出效率和可读性,需要的朋友可以参考下
    2020-05-05
  • 微信小程序 如何保持登录状态

    微信小程序 如何保持登录状态

    这篇文章主要介绍了微信小程序 如何保持登录状态,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 小程序中使用css var变量(使js可以动态设置css样式属性)

    小程序中使用css var变量(使js可以动态设置css样式属性)

    这篇文章主要介绍了小程序中使用css var变量,使js可以动态设置css样式属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离

    关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离

    这篇文章主要介绍了关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离,wx.getLocation只能够获取经纬度,不能够拿到详细地址,这里使用腾讯地图的api,需要的朋友可以参考下
    2023-04-04
  • 微信小程序模板之分页滑动栏

    微信小程序模板之分页滑动栏

    这篇文章主要为大家详细介绍了微信小程序模板之分页滑动栏的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • avalon js实现仿google plus图片多张拖动排序附源码下载

    avalon js实现仿google plus图片多张拖动排序附源码下载

    这篇文章主要介绍了avalon js实现仿google plus图片多张拖动排序附源码下载的相关资料,需要的朋友可以参考下
    2015-09-09

最新评论