原生js的弹出层且其内的窗口居中


Posted in Javascript onMay 14, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta charset="UTF-8"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
* 
{ 
padding:0px; 
margin:0px; 
} 
#Idiv 
{ 
width:900px; 
height:auto; 
position:absolute; 
z-index:1000; 
border:2px solid #ffffff; 
background:#ffffff; 
} 
</style> </HEAD> 
<body> 
<div id="Idiv" style="display:none;"> 
<a href="javascript:void(0)" onclick="closeDiv()">点击关闭层</a> 
<br/>document.documentElement 的区别<br/>document.documentElement 的区别 
</div> 
<div><a href="javascript:void(0)" id="show" onclick="show()">点击打开弹出层!</div> 
</body> 
<script langue="javascript"> 
function show() 
{ 
var Idiv=document.getElementById("Idiv"); 
Idiv.style.display="block"; 
//以下部分要将弹出层居中显示 
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px"; 
//alert(document.body.scrollTop) 
var aa_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2+aa_scrollTop+"px"; 
//此处出现问题,弹出层左右居中,但是高度却不居中,显示在上部分,导致一 //部分不可见,于是暂时在下面添加margin-top 

//以下部分使整个页面至灰不可点击 
var procbg = document.createElement("div"); //首先创建一个div 
procbg.setAttribute("id","mybg"); //定义该div的id 
procbg.style.background ="#000000"; 
procbg.style.width ="100%"; 
procbg.style.height ="100%"; 
procbg.style.position ="fixed"; 
procbg.style.top ="0"; 
procbg.style.left ="0"; 
procbg.style.zIndex ="500"; 
procbg.style.opacity ="0.6"; 
procbg.style.filter ="Alpha(opacity=70)"; 
//取消滚动条 
document.body.appendChild(procbg); 
document.body.style.overflow ="auto"; 
//以下部分实现弹出层的拖拽效果(如果想要弹出层内的div移动,把以下注销去掉即可) 
/* 
var posX; 
var posY; 
Idiv.onmousedown=function(e) 
{ 
if(!e) e = window.event; //IE 
posX = e.clientX - parseInt(Idiv.style.left); 
posY = e.clientY - parseInt(Idiv.style.top); 
document.onmousemove = mousemove; 
} 
document.onmouseup =function() 
{ 
document.onmousemove =null; 
} 
function mousemove(ev) 
{ 
if(ev==null) ev = window.event;//IE 
Idiv.style.left = (ev.clientX - posX) +"px"; 
Idiv.style.top = (ev.clientY - posY) +"px"; 
}*/ 
} 
function closeDiv() //关闭弹出层 
{ 
var Idiv=document.getElementById("Idiv"); 
var mybg = document.getElementById("mybg"); 
document.body.removeChild(mybg); 
Idiv.style.display="none"; 
document.body.style.overflow ="auto";//恢复页面滚动条 
//document.getElementById("mybg").style.display="none"; 
} 
</script> 
</HTML> 
//改变上面的弹出层,做自己的一个loading加载的功能。判断页面是否加载完毕,完毕后隐藏loading.gif 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>New Document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body onload="subSomething()"> 

</body> 
<script type="text/ecmascript"> 
function show(addressImg, img_w, img_h) { 
//得到页面高度 
var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; 
//得到页面宽度 
var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth; 
var procbg = document.createElement("div"); //首先创建一个div 
procbg.setAttribute("id", "mybg"); //定义该div的id 
procbg.style.background = "#555"; 
procbg.style.width = "100%"; 
procbg.style.height = "100%"; 
procbg.style.position = "fixed"; 
procbg.style.top = "0"; 
procbg.style.left = "0"; 
procbg.style.zIndex = "500"; 
procbg.style.opacity = "0.6"; 
procbg.style.filter = "Alpha(opacity=70)"; 
//取消滚动条 
document.body.appendChild(procbg); 
document.body.style.overflow = "auto"; 

var pimg = document.createElement("img"); //创建一个img 
pimg.setAttribute("id", "bg_img"); //定义该div的id 
pimg.setAttribute("src", addressImg); //定义该div的id 
var img_w = (w - img_w) / 2; 
var img_h = (h - img_h) / 2; 
pimg.style.top = img_h + "px"; 
pimg.style.left = img_w + "px"; 
pimg.style.position = "fixed"; 
pimg.style.opacity = "0.9"; 
document.getElementById("mybg").appendChild(pimg); 
} 
function closeDiv() //关闭弹出层 
{ 
var mybg = document.getElementById("mybg"); 
document.body.removeChild(mybg); 
document.body.style.overflow = "auto";//恢复页面滚动条 
//document.getElementById("mybg").style.display="none"; 
} 
show('loading/loading3.gif', '100', '100'); 
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. 
function subSomething() { 
if (document.readyState == "complete") { //当页面加载状态为完全结束时进入 
closeDiv(); 
} 
} 
</script> 
</html>
Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 #Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 #Javascript
JavaScript函数获取事件源的小例子
May 14 #Javascript
javascript单引号和双引号的区别和处理
May 14 #Javascript
document.write的几点使用心得
May 14 #Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 #Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP面向对象法则
2012/02/23 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
php生成随机数的三种方法
2014/09/10 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python设置环境变量的作用和实例
2019/07/09 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
四查四看剖析材料
2014/02/14 职场文书
师德演讲稿范文
2014/05/06 职场文书
迟到检讨书
2015/01/26 职场文书
怎样写离婚协议书
2015/01/26 职场文书
Python字典的基础操作
2021/11/01 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL