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


Posted in Javascript onOctober 04, 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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 #Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 #Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 #Javascript
浅谈jquery高级方法描述与应用
Oct 04 #Javascript
vue.js中$watch的用法示例
Oct 04 #Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 #Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 #Javascript
You might like
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP新手上路(八)
2006/10/09 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
node使用request请求的方法
2019/12/20 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python连接池实现示例程序
2013/11/26 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
Python实现将xml导入至excel
2015/11/20 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
入党自我评价优缺点
2014/01/25 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
2014信息公开实施方案
2014/02/22 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript