脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 登录弹出层

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目录下，图片可在页面上点击右键另存为。
您可能感兴趣的文章:

相关文章

  • 微信小程序实现拍照功能

    微信小程序实现拍照功能

    这篇文章主要为大家详细介绍了微信小程序实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • js实现截取某个字符串前面的内容

    js实现截取某个字符串前面的内容

    这篇文章主要介绍了js实现截取某个字符串前面的内容，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • HTML颜色选择器实现代码

    HTML颜色选择器实现代码

    HTML颜色选择器实现代码需要的朋友可以参考下。
    2010-11-11
  • javascript移动的盒子效果代码

    javascript移动的盒子效果代码

    不错的应用，用方向键控制小方块的移动
    2008-09-09
  • HTML上传控件取消选择

    HTML上传控件取消选择

    由于<input type="file">的value属性石只读的，所以要取消选择只能通过其他途径，此处有2种方法
    2013-03-03
  • layui实现文件或图片上传记录

    layui实现文件或图片上传记录

    这篇文章主要为大家详细介绍了layui实现文件或图片上传记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • js调用设备摄像头的方法

    js调用设备摄像头的方法

    这篇文章主要为大家详细介绍了js调用设备摄像头的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 浅谈JavaScript函数参数的可修改性问题

    浅谈JavaScript函数参数的可修改性问题

    这篇文章主要是对JavaScript函数参数的可修改性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • uniapp实现app热更新的方法

    uniapp实现app热更新的方法

    本文主要介绍了uniapp实现app热更新的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • JavaScript事件Event对象详解(属性、方法、自定义事件)

    JavaScript事件Event对象详解(属性、方法、自定义事件)

    Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,这篇文章主要给大家介绍了关于JavaScript事件Event对象(属性、方法、自定义事件)的相关资料,需要的朋友可以参考下
    2024-01-01

最新评论