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

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

 更新时间：2016年10月04日 20:12:22   投稿：jingxian  
下面小编就为大家带来一篇js当前页面登录注册框,固定div,底层阴影的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

这是一个实例，保存代码为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,底层阴影的实例代码全部内容了，希望大家多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • 微信小程序 自定义复选框实现代码实例

    微信小程序 自定义复选框实现代码实例

    这篇文章主要介绍了微信小程序 自定义复选框实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • javaScript把其它类型转换为Number类型

    javaScript把其它类型转换为Number类型

    在本篇文章里小编给大家整理的是关于javaScript把其它类型转换为Number类型的相关文章，有需要的朋友们学习下。
    2019-10-10
  • Javascript简单实现面向对象编程继承实例代码

    Javascript简单实现面向对象编程继承实例代码

    这篇文章主要介绍了Javascript简单实现面向对象编程继承实例代码,简单分析了面向对象程序设计的特征与继承的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • js刷新框架子页面的七种方法代码

    js刷新框架子页面的七种方法代码

    js刷新框架子页面的七种方法
    2008-11-11
  • JavaScript实现的文本框placeholder提示文字功能示例

    JavaScript实现的文本框placeholder提示文字功能示例

    这篇文章主要介绍了JavaScript实现的文本框placeholder提示文字功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • Javascript 事件流和事件绑定

    Javascript 事件流和事件绑定

    本文中的部分观点参考至《Javascript高级程序设计》（很好的一本书，推荐大家看看！），addEvent函数借鉴了YUI2.7的_addListener方法，这里也要谢谢YUI那些牛人，向他们致敬！
    2009-07-07
  • js变量值传到php过程详解 将php解析成数据

    js变量值传到php过程详解 将php解析成数据

    这篇文章主要介绍了js变量值传到php过程详解 将php解析成数据，传参数去后台，用ajax，或者原生js方式拼接url。明白原理，洞悉系统是先解析php，再执行html代码和js代码。,需要的朋友可以参考下
    2019-06-06
  • JavaScript 函数惰性载入的实现及其优点介绍

    JavaScript 函数惰性载入的实现及其优点介绍

    惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了
    2013-08-08
  • js如何获取file控件的完整路径具体实现代码

    js如何获取file控件的完整路径具体实现代码

    需要隐藏input file然后获取它的值，但连jquery都无法获取它的值，下面与大家分享下使用js的具体获取方法，感兴趣的朋友可以参考下哈
    2013-05-05
  • 用JS编写选项卡效果

    用JS编写选项卡效果

    这篇文章主要为大家详细介绍了用JS编写选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论