实用弹出遮罩层网页背景颜色变灰特效，弹出窗口内容可自己修改，并带有关闭按钮供用户自由关闭。
<!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=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>实用的弹出遮罩层效果_武鸣人</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0 none;}
body{font-family:Arial,"宋体",sans-serif;font-size:12px;}
ol,ul{list-style:none outside none;}
.middle{width:950px;}
.mask{width:100%;position:absolute;z-index:888;background:#000000;filter:alpha(opacity=50);opacity:0.5;}
.charge_game{padding-top:10px;}
.charge_game ul{padding-left:40px;}
.charge_game ul li{background:none repeat scroll 0 0 #EBEBEB;border:1px solid #929292;display:inline;float:left;height:143px;margin:0 40px 40px 0;padding:4px;position:relative;width:268px;}
.charge_game ul li img.pic{height:143px;width:268px;}
charge_game ul li span{cursor:pointer;display:block;height:29px;left:170px;position:absolute;top:114px;width:98px;z-index:10;}
.www_wuming_ren{background:#000; display:none;height:280px;left:180px;position:absolute;top:50px;width:336px;z-index:10;}
.www_wuming_ren h3{color:#50280A;height:25px;line-height:22px;margin:0 auto 10px;overflow:hidden;padding:0 40px;position:relative;text-align:center;width:247px;}
.www_wuming_ren h3 span{cursor:pointer;left:310px;position:absolute;top:0;}
.www_wuming_ren ol{height:300px;margin:10px auto 0;overflow-x:hidden;overflow-y:auto;width:400px;}
.www_wuming_ren li{display:inline;float:left;margin:0 3px;text-align:center;}
/*除IE6浏览器的通用方法*/
.fixed{position:fixed;left:50%; top:50%;}
.fra{width:100%;height:100%;position:fixed;left:0;top:0;background-color:#eee;}
* html,* html body{background-image:url(about:blank);background-attachment:fixed;}
/*IE6特有方法*/
* html .fra{width:100%;height:expression(eval(document.documentElement.clientHeight));position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));background-color:#eee;}
* html .fixed{position:absolute;left:expression(eval(document.documentElement.scrollLeft+(document.documentElement.clientWidth-this.offsetWidth-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0))/2));top:expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))/2));}
</style>
<script src="/img/jquery_wuming_ren.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".www_wuming_ren h3 span").click(function(){
$(".www_wuming_ren").hide();
Mask(false);
});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function click_wuming_ren(game_id, game_name){
$('.www_wuming_ren').hide();
$('#server_window_title_'+game_id).html(game_name);
var oT=($(window).height()-$('#game_servers_'+game_id).height())/2+$(document).scrollTop();
var oL=($(window).width()-$('#game_servers_'+game_id).width())/2+$(document).scrollLeft();
$('#game_servers_'+game_id).show().css({"top":oT,"left":oL,"z-index":999});
Mask(true);
}
function Mask(b){
if(b){
$("<div id='mask'></div>").appendTo("body").addClass("mask").css({"height":document.body.offsetHeight,"top":$(document).scrollTop(),"left":$(document).scrollLeft()});
$("body").attr("scroll","no");
}else{
$("#mask").remove();
$("body").removeAttr("scroll");
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！
<div style="width:950px; height:2000px; margin:0px 300px 50px 0px;">
<div class="charge_game">
<ul class="clearfix">
<li><a onclick="click_wuming_ren(1, '神仙道');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_48.jpg"></a></li>
<li><a onclick="click_wuming_ren(2, '诛神');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_49.jpg"></a></li>
<li><a onclick="click_wuming_ren(3, '傲剑');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_50.jpg"></a></li>
<li><a onclick="click_wuming_ren(4, '逍遥剑');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_51.jpg"></a></li>
<li><a onclick="click_wuming_ren(5, '神仙道');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_48.jpg"></a></li>
<li><a onclick="click_wuming_ren(6, '诛神');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_49.jpg"></a></li>
<li><a onclick="click_wuming_ren(7, '傲剑');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_50.jpg"></a></li>
<li><a onclick="click_wuming_ren(8, '逍遥剑');"><img border="0" class="pic" src="/img/20240302_www_wuming_ren_51.jpg"></a></li>
</ul>
<div id="game_servers_1" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_1"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_48.jpg"></a></li>
</ol>
</div>
<div id="game_servers_2" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_2"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_49.jpg"></a></li>
</ol>
</div>
<div id="game_servers_3" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_3"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_50.jpg"></a></li>
</ol>
</div>
<div id="game_servers_4" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_4"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_51.jpg"></a></li>
</ol>
</div>
<div id="game_servers_5" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_5"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_48.jpg"></a></li>
</ol>
</div>
<div id="game_servers_6" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_6"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_49.jpg"></a></li>
</ol>
</div>
<div id="game_servers_7" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_7"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_50.jpg"></a></li>
</ol>
</div>
<div id="game_servers_8" class="www_wuming_ren fixed">
<h3>游戏名称：<label id="server_window_title_8"></label><span><img src="/img/20240302_www_wuming_ren_52.png"></span></h3>
<ol id="ol">
<li><a href="#"><img border="0" class="pic" width="330px" height="240px" src="/img/20240302_www_wuming_ren_51.jpg"></a></li>
</ol>
</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处