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 相关文章推荐
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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开发文档 会员收费1期
2012/08/14 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP生成树的方法
2015/07/28 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python对html过滤处理的方法
2018/10/21 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
Python3运算符常见用法分析
2020/02/14 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
记帐员岗位责任制
2014/02/08 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Java spring单点登录系统
2021/09/04 Java/Android
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS