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 相关文章推荐
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
js模块加载方式浅析
Aug 12 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
js实现简单页面全屏
Sep 17 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
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
SVG实现时钟效果
2018/07/17 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
草船借箭教学反思
2014/02/03 职场文书
欢送退休感言
2014/02/08 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
庆七一活动总结
2014/08/27 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
中国世界遗产导游词
2015/02/13 职场文书
戒赌保证书
2015/05/11 职场文书
python 远程执行命令的详细代码
2022/02/15 Python