<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框</title>
<script src="JS/jquery-3.1.0.min.js"></script>
<style>
*{margin: 0;padding: 0;box-sizing:border-box;}
ul{list-style: none;}
body{background: url(bg_b.jpg) center 360px no-repeat;}
.banner{height: 360px;width: 100%;background: url(bg.jpg) center center no-repeat;}
.bar{ width:718px; margin:0 auto; height:543px;}
.bar ul{margin: auto;}
.bar ul li{height: 110px;line-height: 110px;float: left;}
.bar li a{display: block;width: 184px;height: 110px;}
.lay{height: 100%;width: 100%;display: none;background-color: #000;position: absolute;top: 0;left: 0;opacity: 0.7;z-index: 500;}
.pop{background: url(pop.jpg) no-repeat;z-index: 10000;width: 863px;height: 458px;display: none;position: fixed;left:0;top: 0}
.pop a{background: url(pop.jpg) no-repeat -863px 0;width: 30px;height: 30px;display: block;position: absolute;top:0;right: -30px;}
</style>
</head>
<body>
<div class="banner"></div>
<div class="bar">
<ul>
<li><a href="###"></a></li>
<li><a href="###" style="width:305px"></a></li>
<li><a href="###"></a></li>
</ul>
</div>
<div class="lay"></div>
<div class="pop"><a href="#"></a></div>
<script>
$('.bar ul li a').click(function(){
showDialg();
})
$('.pop a').click(function(){
$('.pop').fadeOut();
$('.lay').hide();
})
function showDialg(){
$('.lay').show();
var dw=$(document).height();
$('.lay').css({'height':dw});
var h=$(window).height();
var sh=$('.pop').height();
var w=$(window).width();
var sw=$('.pop').width();
var nh=(h-sh)/2;
var nw=(w-sw)/2;
$('.pop').show();
$('.pop').css({
left:nw+'px',
top:nh+'px'
})
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框</title>
<script src="JS/jquery-3.1.0.min.js"></script>
<style>
*{margin: 0;padding: 0;box-sizing:border-box;}
ul{list-style: none;}
body{background: url(bg_b.jpg) center 360px no-repeat;}
.banner{height: 360px;width: 100%;background: url(bg.jpg) center center no-repeat;}
.bar{ width:718px; margin:0 auto; height:543px;}
.bar ul{margin: auto;}
.bar ul li{height: 110px;line-height: 110px;float: left;}
.bar li a{display: block;width: 184px;height: 110px;}
.lay{height: 100%;width: 100%;display: none;background-color: #000;position: absolute;top: 0;left: 0;opacity: 0.7;z-index: 500;}
.pop{background: url(pop.jpg) no-repeat;z-index: 10000;width: 863px;height: 458px;display: none;position: fixed;left:0;top: 0}
.pop a{background: url(pop.jpg) no-repeat -863px 0;width: 30px;height: 30px;display: block;position: absolute;top:0;right: -30px;}
</style>
</head>
<body>
<div class="banner"></div>
<div class="bar">
<ul>
<li><a href="###"></a></li>
<li><a href="###" style="width:305px"></a></li>
<li><a href="###"></a></li>
</ul>
</div>
<div class="lay"></div>
<div class="pop"><a href="#"></a></div>
<script>
$('.bar ul li a').click(function(){
showDialg();
})
$('.pop a').click(function(){
$('.pop').fadeOut();
$('.lay').hide();
})
function showDialg(){
$('.lay').show();
var dw=$(document).height();
$('.lay').css({'height':dw});
var h=$(window).height();
var sh=$('.pop').height();
var w=$(window).width();
var sw=$('.pop').width();
var nh=(h-sh)/2;
var nw=(w-sw)/2;
$('.pop').show();
$('.pop').css({
left:nw+'px',
top:nh+'px'
})
}
</script>
</body>
</html>
