锁屏就是弹出半透明的遮罩层,把整个页面遮住不能操作,然后上边有一个可操作窗口,类似lightbox效果。
<span onclick="lightbox.lockScreen('white')">锁屏并弹出层</span>
<span onclick="lightbox.openScreen('white')">关闭弹出层并解锁</span>
说明:lightbox.lockScreen和lightbox.openScreen分别是锁屏和解锁方法,“white”是要弹出层的id,样式自由控制,只要是默认隐藏并绝对定位即可。
var lightbox = (function(){
function getPageScroll(){ //获取滚动条高度
var yScroll;
if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
return yScroll;
}
var pageWidth = document.documentElement.clientWidth,//可视区域宽和高
pageHeight = document.documentElement.clientHeight;
var widthMore = document.documentElement.scrollWidth,//有滚动条时的宽高
heightMore = document.documentElement.scrollHeight;
var rWidth = widthMore,//透明层宽高
rHeight = Math.max(pageHeight, heightMore);
var blackDiv = document.createElement('div'),
zIframe = document.createElement('iframe');
function setBlack(){//设置透明层,ifame用于盖住页面中得select
var cssStr = 'position:absolute;top:0;left:0;background-color:black;z-index:100;opacity:.80;filter:alpha(opacity=80);' + rWidth + 'px;height:' + rHeight + 'px',
cssStrIframe = 'opacity:.0;filter:alpha(opacity=0);z-index:2;border:0;' + rWidth + 'px;height:' + rHeight + 'px';
blackDiv.style.cssText = cssStr;
zIframe.style.cssText = cssStrIframe;
blackDiv.appendChild(zIframe);
document.body.appendChild(blackDiv);
}
function setWhitePos(id){//设置弹出层位置
var whiteDiv = document.getElementById(id);
whiteDiv.style.display = 'block';
if ((pageWidth - whiteDiv.offsetWidth) > 0){//控制弹出层位置
whiteDiv.style.left = parseInt((pageWidth - whiteDiv.offsetWidth)/2) + 'px';
}else{
whiteDiv.style.left = 0;
}
if ((pageHeight - whiteDiv.offsetHeight) > 0){
whiteDiv.style.top = getPageScroll() + parseInt((pageHeight - whiteDiv.offsetHeight)/2) + 'px';
}else{
whiteDiv.style.top = getPageScroll() + 'px';
}
}
return {//返回2个含开关方法的对象
lockScreen : function(id){
setBlack();
setWhitePos(id)
},
openScreen : function(id){
document.getElementById(id).style.display = 'none';
blackDiv.style.display = 'none';
}
}
})();
12.7.9更新
var lightbox = (function(){ function getPageScroll(){ //获取滚动条高度 var yScroll; if (document.documentElement && document.documentElement.scrollTop){ yScroll = document.documentElement.scrollTop; } else if (document.body) { yScroll = document.body.scrollTop; } return yScroll; } var pageWidth = document.documentElement.clientWidth,//可视区域宽和高 pageHeight = document.documentElement.clientHeight; var widthMore = document.documentElement.scrollWidth,//有滚动条时的宽高 heightMore = document.documentElement.scrollHeight; var rWidth = widthMore,//透明层宽高 rHeight = Math.max(pageHeight, heightMore); var blackDiv = document.createElement('div'), zIframe = document.createElement('iframe'); function setBlack(o){//设置透明层,ifame用于盖住页面中得select var t = o.top || 41, h = o.height || rHeight; z = o.z_index || 1000; var cssStr = 'position:absolute;top:' + t + 'px;left:0;background-color:black;z-index:'+ z +';opacity:.80;filter:alpha(opacity=80);' + rWidth + 'px;height:' + h + 'px', cssStrIframe = 'opacity:.0;filter:alpha(opacity=0);border:0;' + rWidth + 'px;height:' + h + 'px'; blackDiv.style.cssText = cssStr; zIframe.style.cssText = cssStrIframe; blackDiv.appendChild(zIframe); document.body.appendChild(blackDiv); } function setWhitePos(o){//设置弹出层位置 var whiteDiv = document.getElementById(o.id); whiteDiv.style.display = 'block'; whiteDiv.style.zIndex = (o.z_index) ? (o.z_index + 1) : 1001; if ((pageWidth - whiteDiv.offsetWidth) > 0){//控制弹出层位置 whiteDiv.style.left = parseInt((pageWidth - whiteDiv.offsetWidth)/2) + 'px'; }else{ whiteDiv.style.left = 0; } if ((pageHeight - whiteDiv.offsetHeight) > 0){ whiteDiv.style.top = getPageScroll() + parseInt((pageHeight - whiteDiv.offsetHeight)/2) + 'px'; }else{ whiteDiv.style.top = getPageScroll() + 'px'; } } return {//返回2个含开关方法的对象 lockScreen : function(o){ setBlack(o); setWhitePos(o); if(o.callback){ o.callback(); } }, openScreen : function(o){ document.getElementById(o.id).style.display = 'none'; blackDiv.style.display = 'none'; if(o.callback){ o.callback(); } } } })();
传入的参数以对象的形式,加入了回调函数。可以直接传一个高度值防止浏览器差异。