点击图片弹出遮罩效果的提示层，带关闭按钮

发布时间：2018-08-16 20:47:47 所属栏目：聚会来源：站长网

导读：点击图片弹出提示层效果，并且弹出后的层是上下左右居中显示的，这里引用了 jQuery 插件。本代码来自某游戏网站，其原用途是游戏开区提示公告，当然大家也可以把这个效果用在自己实现的地方。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷

　　点击图片弹出提示层效果，并且弹出后的层是上下左右居中显示的，这里引用了jQuery插件。本代码来自某游戏网站，其原用途是游戏开区提示公告，当然大家也可以把这个效果用在自己实现的地方。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery点击图片弹出遮罩层，带关闭按钮_veryhuo.COM</title> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <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{background:url() no-repeat scroll 0 0 transparent;cursor:pointer;display:block;height:29px;left:170px;position:absolute;top:114px;width:98px;z-index:10;} .select_win{background:#000; display:none;height:280px;left:180px;position:absolute;top:50px;width:336px;z-index:10;} .select_win h3{color:#50280A;height:50px;line-height:50px;margin:0 auto 10px;overflow:hidden;padding:0 40px;position:relative;text-align:center;width:247px;} .select_win h3 span{cursor:pointer;left:296px;position:absolute;top:0;} .select_win strong{padding:0 20px;} .select_win ol{height:170px;margin:10px auto 0;overflow-x:hidden;overflow-y:auto;width:295px;} .select_win li{display:inline;float:left;line-height:28px;margin:0 3px;text-align:center;width:85px;} /* 除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> </head> <body> <div style="width:950px; height:2000px; margin:0px auto;"> <div class="charge_game"> <ul class="clearfix"> <li><a onclick="clickGname(1, '神仙道');"><img border="0" class="pic" alt="神仙道" src="/jscss/demoimg/wall_s2.jpg"></a></li> <li><a onclick="clickGname(2, '诛神');"><img border="0" class="pic" alt="诛神" src="/jscss/demoimg/wall_s6.jpg"></a></li> </ul> <div id="veryhuo_com_1" class="select_win fixed"> <h3><label id="server_window_title_1">游戏名称</label><span><img src="/jscss/demoimg/201112/ico_error2.png"></span></h3> <strong class="hue_red">请选择充值游戏服务器：</strong> <ol id="ol"> <li><a href="#">1区群雄并起</a></li> </ol> </div> <div id="veryhuo_com_2" class="select_win fixed"> <h3><label id="server_window_title_2">游戏名称</label><span><img src="/jscss/demoimg/201112/ico_error2.png"></span></h3> <strong class="hue_red">请选择充值游戏服务器：</strong> <ol id="ol"> <li><a href="#">1区轩辕幻世</a></li> </ol> </div> </div> </div> <script type="text/javascript"> $(function(){ $(".select_win h3 span").click(function(){ $(".select_win").hide(); Mask(false); }); }); function clickGname(game_id, game_name){ $('.select_win').hide(); $('#server_window_title_'+game_id).html(game_name); var oT=($(window).height()-$('#veryhuo_com_'+game_id).height())/2+$(document).scrollTop(); var oL=($(window).width()-$('#veryhuo_com_'+game_id).width())/2+$(document).scrollLeft(); $('#veryhuo_com_'+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":$(window).height(),"top":$(document).scrollTop(),"left":$(document).scrollLeft()}); $("body").attr("scroll","no"); }else{ $("#mask").remove(); $("body").removeAttr("scroll"); } } </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!