基于JQuery的JS遮罩层效果

最新推荐文章于 2020-02-07 16:10:22 发布

平凡的Mac

最新推荐文章于 2020-02-07 16:10:22 发布

阅读量1k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

案例1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>遮罩层效果</TITLE>
<style type="text/css">
.mask {
padding : 0px ;
margin : 0px ;
background : #555 ;
position : absolute ;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
Mask.load() ;
}) ;

var Mask = function(){
function load(){
var jq = _render() ;
$("body").click(function(){
unload(jq) ;
}) ;
} ;
function unload(jq){
jq.remove() ;
} ;
function _render(){
var _div = $("<div></div>")
.addClass("mask")
.appendTo("body") ;
var _css = _getCss() ;
_div
.css(_css)
.fadeIn() ;
return _div ;
} ;
function _getCss(){
var css = {
display : "none" ,
top : 0 + "px" ,
left : 0 + "px" ,
width : document.documentElement.clientWidth + "px" ,
height : document.documentElement.clientHeight + "px" ,
zIndex : 9999 ,
opacity : 0.6
} ;
return css ;
} ;
return {
load : load ,
unload : unload
} ;
}() ;
</script>
</HEAD>

<BODY>

</BODY>
</HTML>

案例2.

<!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" οnclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> </div>

<div id="fullbg"></div>


<div id="dialog">
<div id="dialog_content"></div>
<div style="text-align: center;"><a href="#" οnclick="closeBg();">关闭</a></div>
</div>

</body>
</html>

平凡的Mac

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于JQuery的JS遮罩层效果

基于JQuery的JS遮罩层效果 //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$("body").height(); var bW=$("body").width()+16; var objWH=getObjWh(ct); $("#fullbg").css({width:bW,hei
复制链接

扫一扫