<!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 src="jquery.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px;}
.wrapper{ width:940px; border:1px solid #ccc; padding:10px; margin:0 auto; clear:both;}
.wrapper p{ line-height:24px;}
#maskLayer{ position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}
#floatingLayer{ position:absolute; width:400px; height:100px; border:3px solid blue; background-color:#fff; left:0; top:0;}
#floatingLayer h2{ line-height:25px; color:#fff; font-size:12px; background-color:blue; padding:0 10px;}
#floatingLayer h2 span{ float:right; font-weight:normal; cursor:pointer;}
#divContent{ overflow:scroll;}
.content{ padding:20px; text-align:center;}
</style>
<script type="text/javascript">
$(function() {
var maskLayer = $('#maskLayer');
var floatingLayer = $('#floatingLayer');
maskLayer.hide();
floatingLayer.hide();
var pageH = $(document.body).height();
var pageW = $(document.body).width();
var winH = $(window).height();
var maxH = Math.max(winH, pageH);
var floatingLayer_x = (pageW - floatingLayer.width())/2;
var floatingLayer_y = (winH - floatingLayer.height()) / 2;
$(':button').click(function(){
maskLayer.show().width(pageW).height(maxH);
floatingLayer.show().css({'top':floatingLayer_y+'px','left':floatingLayer_x+'px'});
});
$('#close').click(function(){
floatingLayer.hide();
maskLayer.hide();
});
});
</script>
</head>
<body>
<div id="maskLayer"></div>
<div id="floatingLayer">
<h2><span id="close" title="关闭">关闭</span>标题</h2>
<div id="divContent" class="content">content
<p>This is a test</p>
</div>
</div>
<div class="wrapper">
<div style="text-align:center;">
<input type="button" id="test" value="点击弹出" /></div>
<p>Page Content</p>
</div>
</body>
</html>
点击弹出浮动层以及遮罩层的简单方法(jquery)
最新推荐文章于 2017-11-15 15:57:18 发布