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 相关文章推荐
js创建表单元素并使用submit进行提交
Aug 14 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
Ext 今日学习总结
2010/09/19 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python open读写文件实现脚本
2008/09/06 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
opencv实现图像几何变换
2021/03/24 Python
求职面试个人自我评价
2014/02/28 职场文书
四议两公开实施方案
2014/03/28 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
人民调解协议书
2016/03/21 职场文书
mysql 索引合并的使用
2021/08/30 MySQL