遮罩层中的相对定位与绝对定位(Ajax)

前提：公司最近做的一个项目列表，然后点击项目，出现背景遮罩层，弹出的数据框需要异步加载数据数据，让这个数据框居中，搞了两天终于总算达到Boss满意的程度，做了半年C/S，反过来做B/S，顿时感到技术还是需要不断使用，不然就是个废，先来一步一步的分析：

点击有背景层，然后有数据框：

1.背景层和数据框都是两个已经在页面中存在的Div,响应点击事件获取参数就可以

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title></title>

 <script src="Scripts/jquery-1.7.1.js"> </script>

 <script type="text/javascript">

 $(function () {

 $("#test").click(function () {

 var height = $(document).height();

 var width = screen.width;

 var pWidth = $("#dataDialog").width();

 var pHeight = $("#dataDialog").height();

 var top = (height - pHeight) / ;

 var left = (width - pWidth) / ;

 $("#testBg").css({

 "width": width,

 "height": height,

 "display": "block"

 });

 $("#dataDialog").css({

 "top": top,

 "left": left,

 "display": "block"

 });

 });

 });

 </script>

 </head>

 <body>

 <div id="testBg" style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"></div>

 <a href="javascript:void(0);" id="test">背景层测试</a>

 <div id="dataDialog"style="background:white;z-index:5;display:none;width:400px;position:absolute;">

 <table border="" style="border:1px solid black;border-collapse:collapse;">

 <tr><td style="width:100px;">姓名</td><td style="width:300px;">个人简介</td></tr>

 <tr><td id="name">小飞象</td><td id="resume">才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式

 </td></tr>

 </table>

 </div>

 </body>

 </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格式的字符串

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title></title>

 <script src="Scripts/jquery-1.7.1.js"> </script>

 <script type="text/javascript">

 $(function () {

 $("#test").click(function () {

 var height = $(document).height();

 var width = screen.width;

 $.get("/About.aspx", "type=test&Id=1", function (data) {

 var str = JSON.parse(data);

 $("#name").html(str.name);

 $("#resume").html(str.resume);

 });

 var pWidth = $("#dataDialog").width();

 var pHeight = $("#dataDialog").height();

 var top = (height - pHeight) / ;

 var left = (width - pWidth) / ;

 $("#testBg").css({

 "width": width,

 "height": height,

 "display": "block"

 });

 $("#dataDialog").css({

 "top": top,

 "left": left,

 "display": "block"

 });

 });

 });

 </script>

 </head>

 <body>

 <div id="testBg" style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"></div>

 <a href="javascript:void(0);" id="test">背景层测试</a>

 <div id="dataDialog"style="background:white;z-index:5;display:none;width:400px;position:absolute;">

 <table border="" style="border:1px solid black;border-collapse:collapse;">

 <tr><td style="width:100px;">姓名</td><td style="width:300px;">个人简介</td></tr>

 <tr><td id="name">小飞象</td><td id="resume">才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式

 </td></tr>

 </table>

 </div>

 </body>

 </html>

死就死在这个上面，这个页面出现的数据框是无法居中的，一直搞了很久，各位有看出问题的直接可以闪人，没看出来可以自己思考下，没想出来直接看第三段~

3.柳暗花明，尘归尘，土归土，代码的顺序，看源码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <script src="Scripts/jquery-1.7.1.js"> </script>

     <script type="text/javascript">

         $(function () {

             $("#test").click(function () {

                 var height = $(document).height();

                 var width = screen.width;

                 $.get("/About.aspx", "type=test&Id=1", function (data) {

                     var str = JSON.parse(data);

                     $("#name").html(str.name);

                     $("#resume").html(str.resume);

                     var pWidth = $("#dataDialog").width();

                     var pHeight = $("#dataDialog").height();

                     var top = (height - pHeight) / ;

                     var left = (width - pWidth) / ;

                     $("#testBg").css({

                         "width": width,

                         "height": height,

                         "display": "block"

                     });

                     $("#dataDialog").css({

                         "top": top,

                         "left": left,

                         "display": "block"

                     });

                 });

             });

         });

     </script>

 </head>

 <body>

     <div  id="testBg" style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"></div>

     <a  href="javascript:void(0);" id="test">背景层测试</a>

     <div id="dataDialog"style="background:white;z-index:5;display:none;width:400px;position:absolute;">

              <table border="" style="border:1px solid black;border-collapse:collapse;">

                    <tr><td style="width:100px;">姓名</td><td style="width:300px;">个人简介</td></tr>

                    <tr><td id="name">小飞象</td><td id="resume">才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式

                                    </td></tr>

                </table>

     </div>

 </body>

 </html>

Ajax是异步，就是Ajax程序执行的同时，Ajax程序之后的代码也在同时执行，虽然嘴上天天说着异步，只有真正用到的时候才感到异步的真不是说着玩的，想起一句老话，纸上得来终觉浅，绝知此事要躬行~

最后小插曲：

 string name = "小飞象";

 string resume = "才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式";

 StringBuilder sb = new StringBuilder();

 sb.AppendFormat("{ \"name\":\"{0}\",\"resume\":\"{1}\"}", name, resume);

 Console.WriteLine(sb.ToString());

 Console.ReadKey();

在将字符串转成JSON格式遇到的一个问题，开始没看明白，知道这段代码错误的也可以跳过了，不知道的可以测试一下，写博客还是有好处的，第一篇技术博客，希望对需要的人有帮助，祝大家编程愉快~

Samll Fly Elephant