您的位置：首页 > 编程技术 > js  >  JS当前页面登录注册框,固定DIV,底层阴影的实例代码

JS当前页面登录注册框,固定DIV,底层阴影的实例代码

 更新时间：2016年10月2日 16:19  点击：2077

这是一个实例，保存代码为html文件运行试试吧。兼容火狐、ie6、ie7、ie8、Chrome等。

<!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=gb2312" />
<title>JS当前页面登录注册框，固定DIV，底层阴影——脚本之家</title>
<!--
一个按钮
点击之后 显示一个div
div要水平 垂直居中
当我浏览器高度 宽度变化的时候
div依然水平 垂直居中
点击遮罩层，浮动层隐藏
知识点：
1.如何用css控制div水平垂直居中
2.如何用js取得浏览器高度宽度
3.如何控制resize事件-->
<style type="text/css">
.hidden{ display:none}
/*评论浮动层*/
#smallLay{width:498px; height:100px;padding:4px 10px 10px;background-color:#FFFFFF;border:1px solid #05549d;color:#333333;line-height:24px;text-align:left;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:3px 3px 6px #555;}
</style>
</head>
<script type="text/javascript">
  //判断浏览器ie6创建的div的样式和非ie6创建的div的样式
  //创建div
  function showid(idname) {
    var isIE = (document.all) ? true : false;
    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
    var newbox = document.getElementById(idname);
    newbox.style.zIndex = "9999";
    newbox.style.display = "block"
    newbox.style.position = !isIE6 ? "fixed" : "absolute";
    newbox.style.top = newbox.style.left = "50%";
    newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
    newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
    var jihualayer = document.createElement("div");
    jihualayer.id = "jihualayer";
    jihualayer.style.width = jihualayer.style.height = "100%";
    jihualayer.style.position = !isIE6 ? "fixed" : "absolute";
    jihualayer.style.top = jihualayer.style.left = 0;
    jihualayer.style.backgroundColor = "#000";
    jihualayer.style.zIndex = "9998";
    jihualayer.style.opacity = "0.6";
    document.body.appendChild(jihualayer);
    var sel = document.getElementsByTagName("select");
    for (var i = 0; i < sel.length; i++) {
      sel[i].style.visibility = "hidden";
    }
    function jihualayer_iestyle() {
      jihualayer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
+ "px";
      jihualayer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
"px";
    }
    function newbox_iestyle() {
      newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
      newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
    }
    if (isIE) { jihualayer.style.filter = "alpha(opacity=60)"; }
    if (isIE6) {
      jihualayer_iestyle()
      newbox_iestyle();
      window.attachEvent("onscroll", function () {
        newbox_iestyle();
      })
      window.attachEvent("onresize", jihualayer_iestyle)
    }
    jihualayer.onclick = function () {
      newbox.style.display = "none"; jihualayer.style.display = "none"; for (var i = 0; i < sel.length; i++) {
        sel[i].style.visibility = "visible";
      } 
    }
  }
</script>
<body>
<div style="width:200px; height:100px;"></div>
<input name="" type="button" id="showbtn" value="点击显示" onclick="showid('smallLay')" />
<!--收藏浮层开始-->
<div id="smallLay" style="display:none" >
这<a href="http://jihua.cnblogs.com" style="text-decoration:none; color:Gray;">是</a>悬浮层
</div>
<!--收藏浮层结束-->
<div id="a" style="height:1000px;">这<a href="http://jihua.cnblogs.com" style="text-decoration:none; color:Black;">是</a>普通层</div>
</body>
</html>

以上就是小编为大家带来的JS当前页面登录注册框,固定DIV,底层阴影的实例代码的全部内容了，希望对大家有所帮助，多多支持脚本之家~

[!--infotagslink--]

相关文章

  • php中登录后跳转回原来要访问的页面实例

    在很多网站用户先访问一个要登录的页面，但当时没有登录后来登录了，等待用户登录成功之后肯定希望返回到上次访问的页面，下面我就来给大家介绍登录后跳转回原来要访问的页...2016-11-25

  • php中用curl模拟登录discuz以及模拟发帖

    本文章完美的利用了php的curl功能实现模拟登录discuz以及模拟发帖，本教程供参考学习哦。 代码如下 复制代码 <?php $discuz_url = &lsquo;ht...2016-11-25

  • Ruby on Rails实现最基本的用户注册和登录功能的教程

    这里我们主要以has_secure_password的用户密码验证功能为中心,来讲解Ruby on Rails实现最基本的用户注册和登录功能的教程,需要的朋友可以参考下...2020-06-30

  • PHP中SSO Cookie登录分析和实现

    什么是SSO？单点登录SSO（Single Sign-On）是身份管理中的一部分。SSO的一种较为通俗的定义是：SSO是指访问同一服务器不同应用中的受保护资源的同一用户，只需要登录一次，即通过一个应用中的安全验证后，再访问其他应用中的受保护...2015-11-08

  • php有效防止同一用户多次登录

    【问题描述】：同一用户在同一时间多次登录如果不能检测出来，是危险的。因为，你无法知道是否有其他用户在登录你的账户。如何禁止同一用户多次登录呢？ 【解决方案】 (1) 每次登录，身份认证成功后，重新产生一个session_id。 s...2015-11-24

  • PHP中SSO Cookie登录分析和实现

    什么是SSO？单点登录SSO（Single Sign-On）是身份管理中的一部分。SSO的一种较为通俗的定义是：SSO是指访问同一服务器不同应用中的受保护资源的同一用户，只需要登录一次，即通过一个应用中的安全验证后，再访问其他应用中的受保护...2015-11-08

  • vue实现用户登录切换

    这篇文章主要为大家详细介绍了vue实现用户登录切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-22

  • 修改mysql密码phpmyadmin不能登录

    出现phpmyadmin不能登录是我在修改我mysql服务器密码之后导致的，后来百度了相关的原因，原来是修改了mysql密码之后我们还需要在phpmyadmin目录中去修改config.inc.php中...2016-11-25

  • Vue-Element-Admin集成自己的接口实现登录跳转

    关于这个Vue-element-admin中的流程可能对于新的同学不是很友好，所以本文将结合实例代码，介绍Vue-Element-Admin集成自己的接口实现登录跳转，感兴趣的小伙伴们可以参考一下...2021-06-23

  • js实现div在页面拖动效果

    这篇文章主要介绍了js实现div在页面拖动效果,涉及JavaScript动态操作页面元素与数值计算的相关技巧,需要的朋友可以参考下...2016-05-05

  • 浅谈js二维码扫码登录是什么原理

    这篇文章主要介绍了浅谈js二维码扫码登录是什么原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13

  • JavaScript判断DIV内容是否为空的方法

    整体思路是这样的：判断div内部是否为空，如果为空，给出无数据提示；否则显示正常页面，下面给大家分享js判断div内容是否为空的方法，对判断div内容是否为空的相关知识感兴趣的朋友一起学习吧...2016-02-01

  • phpmyadmin不能登录，无任何提示的问题解决

    昨天有一朋友说自己的phpmyadmin不能登录并且无任何提示了，问我怎么解决，下面我来分享一下关于phpmyadmin不能登录问题总结. phpmyadmin不能登录没有提示 解决方法：...2016-11-25

  • PHP中如何使用session实现保存用户登录信息

    session在php中是一个非常重要的东西，像我们用户登录一般都使用到session这个东西，相对于cookie来说session 要安全很多，同时我们购物车经常使用session来做临时的记录保存哦。使用session保存页面登录信息1、数据库连接...2015-10-21

  • 简单php cookie用户登录实例

    cookie 的用途之一是存储用户在特定网站上的密码和 id。另外，也用于存储起始页的首选项。在提供个人化查看的网站上，将要求阁下的网络浏览器利用阁下计算机硬驱上的少量...2016-11-25

  • SpringBoot登录拦截配置详解(实测可用)

    这篇文章主要介绍了SpringBoot登录拦截配置详解(实测可用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-22

  • Win2012服务器 远程桌面帐户允许多用户同时登录的配置方法

    这篇文章主要介绍了Win2012服务器 远程桌面帐户允许多用户同时登录的配置方法,需要的朋友可以参考下...2016-11-01

  • vue实现登录验证码

    这篇文章主要为大家详细介绍了vue实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-13

  • 微信小程序授权登录的优雅处理方式

    这篇文章主要给大家介绍了关于微信小程序授权登录的优雅处理方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-10

  • jquery 实现回车登录详解及实例代码

    这篇文章主要介绍了jquery 实现回车登录详解的相关资料,整理了几种方法及简单实现实例，需要的朋友可以参考下...2016-10-25