一个图片弹出层效果，居中显示

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>无标题文档</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></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="//ku.shouce.ren/files/images/201601/56a318474d971.jpg"></a></li>
            <li><a onclick="clickGname(2, '诛神');"><img border="0" class="pic" alt="诛神" src="//ku.shouce.ren/files/images/201601/56a31847e8203.jpg"></a></li>
           </ul>                    
        <div  id="game_servers_1" class="select_win fixed">
            <h3><label id="server_window_title_1">游戏名称</label><span><img src="//ku.shouce.ren/files/images/201601/56a318488f329.png"></span></h3>
            <strong class="hue_red">请选择充值游戏服务器：</strong>
            <ol id="ol">
                <li><a href="#">1区 群雄并起</a></li>
            </ol>
        </div>
        <div id="game_servers_2" class="select_win fixed">
            <h3><label id="server_window_title_2">游戏名称</label><span><img src="//ku.shouce.ren/files/images/201601/56a318488f329.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()-$('#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":$(window).height(),"top":$(document).scrollTop(),"left":$(document).scrollLeft()});
			$("body").attr("scroll","no");
		}else{
			$("#mask").remove();
			$("body").removeAttr("scroll");
		}
	}
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一个图片弹出层效果，居中显示

分类

表格图层

描述

一个图片弹出层效果，居中显示，调试了很多天，终于做好了，不过还有些bUG，先分享给大家使用吧。