js代码：
$(function(){
var dialogLayer = $('#dialogLayer');
var dialogBox = $('#dialogBox');
dialogLayer.hide();
dialogBox.hide();
var pageH = $(document.body).height(); //获取页面文档的高度赋值给pageH
var pageW = $(document.body).width(); //获取页面文档的宽度赋值给pageW
var winH = $(window).height();//获取窗口可视区域的的高度赋值给winH
var maxH = Math.max(winH,pageH);//winH 和 pageH 进行比较取得最大的值赋给maxH
var dialogBox_x = (pageW - dialogBox.width())/2;//计算出dialogBox的x坐标
var dialogBox_y = (winH - dialogBox.height())/2;//计算出dialogBox的y坐标
//给按钮绑定click事件，点击弹出浮层
$(':button').click(function(){
dialogLayer.show().width(pageW).height(maxH);
dialogBox.show().css({'top':dialogBox_y+'px','left':dialogBox_x+'px'});
});
//关闭浮层
$('#close').click(function(){
dialogBox.hide();
dialogLayer.hide();
});
});
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;}
#dialogLayer{ position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}
#dialogBox{ position:absolute; width:400px; height:300px; border:3px solid blue; background-color:#fff; left:0; top:0;}
#dialogBox h2{ height25px; line-height:25px; color:#fff; font-size:12px; background-color:blue; padding:0 10px;}
#dialogBox h2 span{ float:right; font-weight:normal; cursor:pointer;}
.content{ padding:20px; text-align:center;}
html代码：
<div id="dialogLayer"></div> <div id="dialogBox"> <h2><span id="close" title="关闭">关闭</span>请您登录</h2> <div class="content">content</div> </div> <div style="text-align:center;"><input type="button" value="点击弹出登陆框" /></div>
运行下面的代码可以查看效果：
提示：你可以先修改部分代码再运行。