前提：公司最近做的一个项目列表，然后点击项目，出现背景遮罩层，弹出的数据框需要异步加载数据数据，让这个数据框居中，搞了两天终于总算达到Boss满意的程度，做了半年C/S，反过来做B/S，顿时感到技术还是需要不断使用，不然就是个废，先来一步一步的分析：
点击有背景层，然后有数据框：
1.背景层和数据框都是两个已经在页面中存在的Div,响应点击事件获取参数就可以
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script src="Scripts/jquery-1.7.1.js"> </script> 7 <script type="text/javascript"> 8 $(function () { 9 $("#test").click(function () { 10 var height = $(document).height(); 11 var width = screen.width; 12 var pWidth = $("#dataDialog").width(); 13 var pHeight = $("#dataDialog").height(); 14 var top = (height - pHeight) / 2; 15 var left = (width - pWidth) / 2; 16 $("#testBg").css({ 17 "width": width, 18 "height": height, 19 "display": "block" 20 }); 21 $("#dataDialog").css({ 22 "top": top, 23 "left": left, 24 "display": "block" 25 }); 26 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 <div id="testBg" style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"></div> 33 <a href="javascript:void(0);" id="test">背景层测试</a> 34 <div id="dataDialog"style="background:white;z-index:5;display:none;width:400px;position:absolute;"> 35 <table border="1" style="border:1px solid black;border-collapse:collapse;"> 36 <tr><td style="width:100px;">姓名</td><td style="width:300px;">个人简介</td></tr> 37 <tr><td id="name">小飞象</td><td id="resume">才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式 38 </td></tr> 39 </table> 40 </div> 41 42 </body> 43 </html>
背景层的样式style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"稍微说下(如果你是前端已经很强可以忽略我)，background控制背景颜色，opacity设置透明度，两个算是哥俩一块用，top，left设为0背景是整个页面，;position:absolute设为绝对，设为z-index的数值是叠加时候的顺序，小的在下面~
数据框样式style="background:white;z-index:5;display:none;width:400px;position:absolute;"其中z-index比背景层的数值大就行.
2.上面的代码数据框是居中的，没有任何问题，现在需要异步加载一下数据，填充数据后台返回JSON格式的字符串
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script src="Scripts/jquery-1.7.1.js"> </script> 7 <script type="text/javascript"> 8 $(function () { 9 $("#test").click(function () { 10 var height = $(document).height(); 11 var width = screen.width; 12 $.get("/About.aspx", "type=test&Id=1", function (data) { 13 var str = JSON.parse(data); 14 $("#name").html(str.name); 15 $("#resume").html(str.resume); 16 }); 17 var pWidth = $("#dataDialog").width(); 18 var pHeight = $("#dataDialog").height(); 19 var top = (height - pHeight) / 2; 20 var left = (width - pWidth) / 2; 21 $("#testBg").css({ 22 "width": width, 23 "height": height, 24 "display": "block" 25 }); 26 $("#dataDialog").css({ 27 "top": top, 28 "left": left, 29 "display": "block" 30 }); 31 32 }); 33 }); 34 </script> 35 </head> 36 <body> 37 <div id="testBg" style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"></div> 38 <a href="javascript:void(0);" id="test">背景层测试</a> 39 <div id="dataDialog"style="background:white;z-index:5;display:none;width:400px;position:absolute;"> 40 <table border="1" style="border:1px solid black;border-collapse:collapse;"> 41 <tr><td style="width:100px;">姓名</td><td style="width:300px;">个人简介</td></tr> 42 <tr><td id="name">小飞象</td><td id="resume">才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式 43 </td></tr> 44 </table> 45 </div> 46 47 </body> 48 </html>
死就死在这个上面，这个页面出现的数据框是无法居中的，一直搞了很久，各位有看出问题的直接可以闪人，没看出来可以自己思考下，没想出来直接看第三段~
3.柳暗花明，尘归尘，土归土，代码的顺序，看源码：
View Code
Ajax是异步，就是Ajax程序执行的同时，Ajax程序之后的代码也在同时执行，虽然嘴上天天说着异步，只有真正用到的时候才感到异步的真不是说着玩的，想起一句老话，纸上得来终觉浅，绝知此事要躬行~
最后小插曲：
1 string name = "小飞象"; 2 string resume = "才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式"; 3 StringBuilder sb = new StringBuilder(); 4 sb.AppendFormat("{ \"name\":\"{0}\",\"resume\":\"{1}\"}", name, resume); 5 Console.WriteLine(sb.ToString()); 6 Console.ReadKey();
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/3452696.html，如需转载请自行联系原作者
