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

前提：公司最近做的一个项目列表，然后点击项目，出现背景遮罩层，弹出的数据框需要异步加载数据数据，让这个数据框居中，搞了两天终于总算达到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.柳暗花明，尘归尘，土归土，代码的顺序，看源码：

 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                     var pWidth = $("#dataDialog").width();
17                     var pHeight = $("#dataDialog").height();
18                     var top = (height - pHeight) / 2;
19                     var left = (width - pWidth) / 2;
20                     $("#testBg").css({
21                         "width": width,
22                         "height": height,
23                         "display": "block"
24                     });
25                     $("#dataDialog").css({
26                         "top": top,
27                         "left": left,
28                         "display": "block"
29                     });
30 
31                 });
32            
33             });
34         });
35     </script>
36 </head>
37 <body>
38     <div  id="testBg" style="background:black;position:absolute;top:0px;left:0px;z-index:1;display:none;opacity:0.8"></div>
39     <a  href="javascript:void(0);" id="test">背景层测试</a>
40     <div id="dataDialog"style="background:white;z-index:5;display:none;width:400px;position:absolute;">
41              <table border="1" style="border:1px solid black;border-collapse:collapse;">
42                    <tr><td style="width:100px;">姓名</td><td style="width:300px;">个人简介</td></tr>
43                    <tr><td id="name">小飞象</td><td id="resume">才毕业的菜鸟级别的人，总是犯一些未知活已知的错误，需要给出自己的判断力，加强自己的执行力，你需要不断的去把控自己，给出所有的问题一个正确的解决方式
44                                    </td></tr>
45                </table>
46     </div>
47    
48 </body>
49 </html>
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();

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

                                                                                                                                                                                           By

                                                                                                                                                                                     Samll  Fly   Elephant

posted @ 2013-12-01 16:09  Fly_Elephant  阅读(1938)  评论(0)  编辑  收藏  举报