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

前端技术 2023/09/05 JavaScript
复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/13971

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案