您的位置：首页 > 其它

jq兼容各个浏览器的遮罩层效果，有关闭按钮（非常强大的）

2016-10-25 17:49 218 查看
<!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="../../homepage/js/jquery-1.4.2.js"></script>  
<script type="text/javascript">  
    var clientH = null;  
    var jq = jQuery.noConflict();  
    var h=null;  
        window.onload = function zhezhao(){  
            clientH = document.documentElement.clientHeight;  
            if(isSafari=navigator.userAgent.indexOf("Safari")>0){  
                h = document.body;  
            }else{  
                h =document.documentElement;  
            }  
        }  
        function showBg(elem){  
            var w = (document.documentElement.clientWidth/2)-(jq("#"+ elem).width()/2);  
            jq("#"+ elem).css("top",(h.scrollTop+ (clientH/2)-(jq("#"+ elem).height()/2))+"px");  
            jq("#"+ elem).css("left",w+"px");  
            jq("#fullbg").css("display","block");  
            jq("#"+ elem).css("display","block");  
        }  
         
        function closeBg(){  
            jq("#fullbg").css("display","none");  
            jq("#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:fixed;  
left:0px;  
top:0px;  
width:100%;  
height:100%;  
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;  
overflow:scroll;  
}  
 
#main {  
height: auto;  
}  
</style>  
</head>  
<body>  
<div id="main">  
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a><br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a><br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<br />  
<a href="#rhis" onclick="showBg('dialog');">点击这里看JS遮罩层效果</a>  
</div>  
<!-- JS遮罩层 -->  
<div id="fullbg"></div>  
<!-- end JS遮罩层 -->  
<!-- 对话框 -->  
<div id="dialog">  
<div style="text-align: center;">正在加载，请稍后...<a href="#" onclick="closeBg();">关闭</a></div>  
</div>  
<!-- JS遮罩层上方的对话框 -->  
</body>  
</html>  
转自：http://blog.csdn.net/liyuedan/article/details/7057622
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航