JavaScript-JS如何创建遮罩层

JavaScript-JS如何创建遮罩层

清晨说ぺ晚安 发布于 2017-05-07 字数 218 浏览 1155 回复 5

在开发平台中使用到遮罩层。需求如下:
1.提示浮层在窗口滚动条滚动下保持在一个固定的位置。
2.提示浮层在窗口改变大小的时候保持遮罩整个可见页面。

请提供一个兼容主流浏览器、封装好和调用简便的js代码。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

瑾兮 2017-07-28 5 楼

说个最简答的方法吧:
用jquery的blockUI插件,就会直接生成一个浮层。
一个简单的例子

<script type="text/javascript" src="<%=basePath %>/js/jquery-1.3.1.min.js"></script>
<script language="javascript" src="<%=basePath %>/js/jquery.blockUI.js"></script>
considerCallback = function(url){
var html = "";
html+='<div style="width:300px;">';
//html+='<h3>';
html+='<img src="'+url+'/images/goBar.gif" border="0" style="margin-left: -48px;" width="230px;" height="20px;">';
html+='<div class="pop_info_cue">';
html+='<div class="mat">';
html+='<font color="green">正在提交,请稍后。</font>';
html+='</div>';
html+='</div>';
html+='</div>';

$.blockUI(html);
}

归属感 2017-07-16 4 楼

我这里有个基于JQuery的遮罩层,以下代码你可以参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于JQuery的JS遮罩层效果</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载,请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
}

function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}

//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}

</script>
<style type="text/css">
* {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg {
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}
#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main"> <a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> </div>
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!-- JS遮罩层上方的对话框 -->
</body>
</html>

想挽留 2017-06-24 3 楼

可以用jquery,也可以直接写,生成一个全页面长宽的div层,再在上面通过iframe或者ajax调用相应的页面就行,我给一个兼容性还算可以的吧,对话框是通过iframe加载页面来实现:

var js = document.getElementsByTagName('script');
var jspath = js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);//自动获取js的路径
var iframediv = {
id:Math.random(),
show:function(file,param){
var p = document.createElement('DIV');
p.id=this.id;
var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
p.style.cssText = "z-index:999999;width:"+scrollWidth+"px;height:"+scrollHeight+"px;position:absolute;left:0;top:0;background-color:#666;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;";
document.body.appendChild(p);
var p1=document.createElement("DIV");
p1.id="box"+this.id;
p1.style.cssText = "z-index:9999999;width:600px;position:absolute;top:0;left:50%;margin-left:-300px;background-color:#666;";
document.body.appendChild(p1);
p1.innerHTML = '<iframe width="600" height="490" marginWidth=0 marginHeight=0 frameBorder=0 width="100%" scrolling="no" allowTransparency="true" src="XXXX"></iframe><a style="position:absolute;left:123px;top:10px;height:40px;width:40px;background-color:#ffffff; filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" href="javascript:closeIframediv()" title="close"> </a>';
this.iframescroll();
},
iframescroll:function(){
if(!document.getElementById("box"+this.id) ) return;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
document.getElementById("box"+this.id).style.top = parseInt(clientHeight*0.08) + parseInt(scrollTop)+"px";
},
close:function(){
document.body.removeChild(document.getElementById("box"+this.id));
document.body.removeChild(document.getElementById(this.id));
}
}
if( window.addEventListener){
window.addEventListener('scroll',function(){ iframediv.iframescroll(); },false);
}else if(window.attachEvent){
window.attachEvent('onscroll',function(){ iframediv.iframescroll(); });
}
window.closeIframediv = function(){ iframediv.close(); };
window.showDiv = function(param){ iframediv.show('login',param); };

封装成js文件后,直接调用showDiv();即可

清晨说ぺ晚安 2017-06-08 2 楼

最简单的方法是用div层,使其高度与宽与当前文档一样就可以,设置它的z-index大于页面所有层的z-index,然后你在设置一个你想在层上面的层,设置它的z-index大于遮蔽层的z-index就行了

归属感 2017-05-11 1 楼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
var bH=$("body").height();
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
$("#fullbg").css({width:bW,height:bH,display:"block"});
var tbT=objWH.split("|")[0]+"px";
var tbL=objWH.split("|")[1]+"px";
$("#"+ct).css({top:tbT,left:tbL,display:"block"});
$("#"+content).html("<div style='text-align:center'>正在加载,请稍后...</div>");
$(window).scroll(function(){resetBg()});
$(window).resize(function(){resetBg()});
}
function getObjWh(obj){
var st=document.documentElement.scrollTop;//滚动条距顶部的距离
var sl=document.documentElement.scrollLeft;//滚动条距左边的距离
var ch=document.documentElement.clientHeight;//屏幕的高度
var cw=document.documentElement.clientWidth;//屏幕的宽度
var objH=$("#"+obj).height();//浮动对象的高度
var objW=$("#"+obj).width();//浮动对象的宽度
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
return objT+"|"+objL;
}
function resetBg(){
var fullbg=$("#fullbg").css("display");
if(fullbg=="block"){
var bH2=$("body").height();
var bW2=$("body").width()+16;
$("#fullbg").css({width:bW2,height:bH2});
var objV=getObjWh("dialog");
var tbT=objV.split("|")[0]+"px";
var tbL=objV.split("|")[1]+"px";
$("#dialog").css({top:tbT,left:tbL});
}
}

//关闭灰色JS遮罩层和操作窗口
function closeBg(){
$("#fullbg").css("display","none");
$("#dialog").css("display","none");
}

</script>
<style type="text/css">
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#fullbg{
background-color: Gray;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
filter:Alpha(Opacity=30);
/
IE /
-moz-opacity:0.4;
/
Moz + FF */
opacity: 0.4;
}

#dialog {
position:absolute;
width:200px;
height:200px;
background:#F00;
display: none;
z-index: 5;
}

#main {
height: 1500px;
}
</style>
</head>
<body>
<div id="main">
<a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>
</div>
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div>
</div>
<!-- JS遮罩层上方的对话框 -->
</body>
</html>