美文网首页JavaScriptWeb前端之路Web 前端开发
JavaScript获取页面高度宽度 弹出层效果

JavaScript获取页面高度宽度 弹出层效果

作者: 蛋黄肉 | 来源:发表于2017-03-23 09:22 被阅读82次

新人第一次发帖,可喜欢可评论可转载

先来说一说获取页面高度宽度的问题

var sheight = document.documenElement.scrollHeight;   //获取页面的高度

var swidth = document.documentElelment.scrollWidth;    //获取页面的宽度

var cheight = document.documentElement.clientHeight;  //获取页面可视区域的高度

var cwidth= document.documentElement.clientWidth;  //获取页面可视区域的高度

页面高度指的是整个网页高度,就是在顶部到底部的长度

页面可是区域的高度指的是我们能看到的长度,如果你不改变浏览器的窗口大小和分辨率的大小,这个值一般是不会改变的。

页面的宽度就没什么好说的了,因为通常情况下 swidth = cwidth 。很少有网页能够左右拉动的。

然后在来说一说弹出层,这个看起来高大上实际上非常简单非常基础的东西,我学习的时候真的是泪流满面,曾经觉得这怎么这么难,看了原理之后这的是欲哭无泪。好吧,我是小白。

先来看看如果要做出弹出层需要知道的东西:

CSS:

position:fixed;
z-index:---;
opacity:0.5;//遮罩层层透明度
filter:alpha(opacity=50);//兼容IE
position:absolute;//绝对定位

Js:

var div = document.create('div');//创建节点
document.body.appendChild(div);//插入节点

说一说弹出层的原理,点击一个按钮时触发一个事件,这个事件新建了两个DOM节点,一个是遮罩层,一个是弹出框。通过设置遮罩层的透明度来实现背景变黑,将遮罩层的 z-index设置为100(比页面中其他元素的z-index)大就可以,弹出框的z-index设置为101(比遮罩层大)。通过点击遮罩层或者关闭按钮删除刚刚创建的节点。

最后,按照习俗该上代码了...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
</head>
<style>
#close{ //关闭按钮
    background:url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat; 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:15px; 
    text-indent:-999em;
}
#login{ //弹出框
    position:fixed;
    z-index:1001;
}
.loginCon{ 
    position:relative; 
    width:670px;
    height:380px;
    background:url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
}
#Misk{//弹出层
    position: absolute;
    top:0px;
    left:0px;
    background-color: #000;
    z-index: 1000;
    opacity:0.5;
    filter:alpha(opacity=50);//兼容IE
}
</style>
<body>
    <input id='Btn' type="button" value='打开弹出层' />
    <script>
        var btn = document.getElementById('Btn');
        btn.onclick=function () {
            //获取页面的高度和宽度
            var sHeight = document.documentElement.scrollHeight;
            var sWidth = document.documentElement.scrollWidth;
            
            //获取页面的可视区域高度和宽度
            var wHeight=document.documentElement.clientHeight;
            var wWidth=document.documentElement.clientWidth;
            var oLogin=document.createElement("div");
            oLogin.id="login";
            oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
            //插入创建的登陆框
            document.body.appendChild(oLogin);
            //获取登陆框的宽和高
            var dHeight = 400;   // 获取登陆框的高度
            var dWidth = 800;      // 获取登陆框的宽度
            //设置登陆框的left和top
            oLogin.style.left=wWidth/2-dWidth/2+"px";
            oLogin.style.top=wHeight/2-dHeight/2+'px';  //设置登陆框top值

            var oMisk = document.createElement('div');
            oMisk.id='Misk';
            oMisk.style.height=wHeight+'px';
            oMisk.style.width=wWidth+'px';
            document.body.appendChild(oMisk);

            var oClose=document.getElementById("close");
            //点击登陆框以外的区域也可以关闭登陆框
            oMisk.onclick=oClose.onclick=function()
            {
                document.body.removeChild(oLogin);
                document.body.removeChild(oMisk);
            }
        }
    </script>
</body>
</html>

课程来自慕课网,后续会有更多类似特效,基本每天一个。

相关文章

网友评论

    本文标题:JavaScript获取页面高度宽度 弹出层效果

    本文链接:https://www.haomeiwen.com/subject/asfznttx.html