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格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
Vue3.0的优化总结
Oct 16 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生成静态HTML文档的原理
2012/10/29 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
php实现用户登陆简单实例
2017/04/04 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python pymsql模块的使用
2020/09/07 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
人事主管的岗位职责
2013/11/16 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
python中的3种定义类方法
2021/11/27 Python
如何利用golang运用mysql数据库
2022/03/13 Golang