弹出层效果的制作

最新推荐文章于 2021-06-19 21:23:11 发布

chenlxhf

最新推荐文章于 2021-06-19 21:23:11 发布

阅读量4.6k

点赞数 1

分类专栏：学习记录文章标签：弹出层登录框

本文链接：https://blog.csdn.net/chenlxhf/article/details/50143349

版权

学习记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

弹出层，就是点击页面的某个按钮之后弹出一个覆盖原来的层，一般运用在用户登录注册上比较多。下面简单的写下实现原理：

1.首先是也面固有的状态，这里只是一个简单的例子。

<pre name="code" class="html"><span style="font-size:18px;"><body>
<div id="header">
<button id="heder-login">登录</button>
</div>
<div id="main">
<img src="img/index_banner01.jpg" />
<img src="img/index_banner01.jpg" />
</div>
<!-- 这里注释的部分实际上是需要通过JS来动态生成的部分，写在这里主要是为了写JS的时候更方便-->
<!--	 <div id="mask">
<div id="login">
<div class="loginCon"></div>
<div id="close"></div>
</div>
</div> 	   -->
</body></span>

下面是样式部分：

<span style="font-family: 汉仪南宫体简, 'MS Sans Serif', sans-serif; font-size: 19px; widows: auto; background-color: rgb(255, 237, 196);"></span><pre name="code" class="html"><style>

*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 40px;
background-color: gray;
}
#heder-login{
position: absolute;
background-color: crimson;
right: 0;
display: inline-block;
height: 40px;
width: 60px;
clear: both;
}
//下面的选择器的height和width属性都是需要用js动态设置，这里就先不设置。
#mask{
left: 0;
top: 0;
position: absolute;

background-color: #808080;
opacity: 0.85;
z-index: 1000;
}
#login{ 

position:fixed;
z-index:1001;
}
 	 .loginCon{ 
position:relative; 
width:670px;
height:380px;
background:url(img/loginBg.png) #2A2C2E center center no-repeat;
}
#close{ 
background:url(img/close.png) no-repeat; 
width:30px; 
height:30px; 
cursor:pointer; 
position:absolute; 
right:5px; 
top:15px; 

}
</style>

下面开始写js了

<span style="font-size:18px;"><script>
</span><span style="font-size:24px;">function newOpen(){
//获取页面高度和宽度
var sHeight=document.body.scrollHeight;
var sWidth=document.body.scrollWidth;
//获取页面可见高度和宽度
var cHeight=document.documentElement.clientHeight;
var cWidth=document.documentElement.clientWidth;

//设置整个背景
var oMask=document.createElement("div");
oMask.id="mask";
oMask.style.width=cWidth+"px";
oMask.style.height=sHeight+"px";
document.body.appendChild(oMask);
//设置登录框
var oLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>";
document.body.appendChild(oLogin);

//获取登陆框的宽和高
var dHeight=oLogin.offsetHeight;
var dWidth=oLogin.offsetWidth;
//设置登陆框的left和top
oLogin.style.left=cWidth/2-dWidth/2+"px";
oLogin.style.top=cHeight/2-dHeight/2+"px";
//点击关闭按钮
var oClose=document.getElementById("close");
//点击登陆框以外的区域也可以关闭登陆框
oClose.οnclick=oMask.οnclick=function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
};

}
window.οnlοad=function(){
var denglu=document.getElementById("header-login");
denglu.οnclick=function(){
newOpen();
return false;
}

}

</script>
</span>

这样一个弹出层的效果就完成了。弹出层基本全是用的绝对定位，这样方便元素确定元素的显示位置。而且由于要将登陆框显示在最上层，还要用到z-index这个属性，他是数值越高，优先级越高。还有一个就是为了将登陆框定位在屏幕中央，且不随滚动提条的滚动而变化，将它用position：fixed固定，并且它的left值和top值都是用屏幕的可视宽度和高度分别减登陆框的宽度和高度后除以2等到的。