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


Posted in Javascript onSeptember 29, 2016

这是一个实例,保存代码为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,底层阴影的实例代码的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
js变量以及其作用域详解
Jul 18 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 #Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 #Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 #Javascript
jQuery 特性操作详解及实例代码
Sep 29 #Javascript
JS中常用的正则表达式
Sep 29 #Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 #Javascript
js创建对象几种方式的优缺点对比
Sep 28 #Javascript
You might like
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
thinkphp分页集成实例
2017/07/24 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python迭代器和生成器介绍
2015/03/06 Python
python中list列表的高级函数
2016/05/17 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python 12306抢火车票脚本
2018/02/07 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
四风对照检查材料范文
2014/09/27 职场文书
个人投资合作协议书
2014/10/12 职场文书
业务员岗位职责
2015/02/03 职场文书
英雄儿女观后感
2015/06/09 职场文书
班委竞选稿范文
2015/11/21 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python