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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

文艺小青年 2017-11-23 13:21:00 浏览656
展开阅读全文

前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到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,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
文艺小青年
+ 关注