原生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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
vue实现简单全选和反选功能
Sep 15 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php 读取文件乱码问题
2010/02/20 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python ZipFile模块详解
2013/11/01 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python常见异常分类与处理方法
2017/06/04 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python实现学生管理系统开发
2020/07/24 Python
Python用Jira库来操作Jira
2020/12/28 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
新年抽奖获奖感言
2014/03/02 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
北京英文导游词
2015/02/12 职场文书
党员评议自我评价
2015/03/03 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
Golang map映射的用法
2022/04/22 Golang