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在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
简单的Jquery全选功能
Nov 07 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
原生js实现日历效果
Mar 02 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
Smarty安装配置方法
2008/04/10 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php中opendir函数用法实例
2014/11/15 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
前端性能优化及技巧
2016/05/06 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python与字符编码问题
2019/05/24 Python
Django 重写用户模型的实现
2019/07/29 Python
python生成word合同的实例方法
2021/01/12 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
护理专业自荐信
2013/12/03 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
董事长助理岗位职责
2015/02/11 职场文书
微信搭讪开场白
2015/05/28 职场文书
亮剑观后感
2015/06/05 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
python中数组和列表的简单实例
2022/03/25 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS