原生js的弹出层且其内的窗口居中
更新时间：2014年05月14日 17:16:37 作者：
弹出层内含窗口且居中，在本例使用原生js来实现，与网上的有所不一样，大家不妨参考下
复制代码 代码如下:
<!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>
相关文章
晚上要下班了老板发来一个任务：把一个300M左右的视频压缩到100M以内,以便在微信上发送。于是就是抽空搞了起来，下面小编把过程分享到脚本之家平台，需要的朋友参考下吧2018-11-11
这篇文章主要介绍了JavaScript RegExp 对象用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本周学习了navigtor到导航组件,目前我想使用navigtor组件实现跳转以及返回功能,下面这篇文章主要给大家介绍了关于微信小程序使用navigator实现页面跳转功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
本篇文章主要是对js 判断控件获得焦点的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了JS实现简易图片轮播效果的方法,实例分析了javascript操作图片实现轮播特效的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要给大家介绍了关于wangEditor富文本编译器插件学习系列之工具栏配置的相关资料,wangEditor是一款基于原生JavaScript封装,开源免费的富文本编辑器,支持常规的文字排版操作、插入图片、插入视频、插入代码等功能,需要的朋友可以参考下2023-12-12
在多姿多彩的JavaScript世界,Polyfill如同一座架在浏览器兼容性鸿沟之上的桥梁,本文将介绍常见的JavaScript Polyfill兼容方案,并举例说明它们的应用,需要的可以参考下2023-12-12
这篇文章主要介绍了JavaScript页面倒计时功能,结合完整实例形式分析了javascript计时器、时间运算相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要跟大家分享了一次围绕setTimeout展开的前端面试经验，是一篇有意思的围绕setTimeout展开的前端开发考题，考察了for循环、定时器setTimeout()、JavaScript闭包、匿名函数和Promise等，一不小心你可能就会做错，快来看看你有没有掌握了上面的知识。2017-06-06
本文主要对实现一个简单的js加载器的步骤进行介绍--主要可以分为解析路径、下载模块、解析模块依赖、解析模块四个步骤。需要的朋友来看下吧2016-12-12
最新评论