前言
这个是JavaScript视频教程中的小项目中的一个小部分,在之前实现了点击登录按钮时弹出登录框,现在要实现对弹出的窗口进行强调突出表现,所以就需要对周围的元素进行遮罩,并且周围的元素不可以进行操作,这就需要进行锁屏了,看看具体怎么实现?
步骤
1.创建一个可以布满整个浏览器的div
<div id="screen"></div>
2.设置CSS 在login之前设置
#screen {
position:absolute;
top:0;
left:0;
background:#000;
z-index:9998; /* 层高度 */
filter:alpha(opacity=30); /* IE透明度 */
opacity:0.3; /* 非IE透明度 */
display:none;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#fff;
}
3.兼容浏览器 分层封装
//跨浏览器获取视口大小
function getInner() {
if (typeof window.innerWidth != 'undefined') {
return {
width : window.innerWidth,
height : window.innerHeight
}
} else {
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}
}
4.锁屏功能
//锁屏功能
Base.prototype.lock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.width = getInner().width + 'px';
this.elements[i].style.height = getInner().height + 'px';
this.elements[i].style.display = 'block';
}
return this;
};
//解锁功能
Base.prototype.unlock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
return this;
}
5.效果
小结
按照视频中的讲述一步步实现,最终实现出所要的效果,还是略有成就感的!