遮罩层中的相对定位与绝对定位(Ajax)
前提：公司最近做的一個(gè)項(xiàng)目列表，然后點(diǎn)擊項(xiàng)目，出現(xiàn)背景遮罩層，彈出的數(shù)據(jù)框需要異步加載數(shù)據(jù)數(shù)據(jù)，讓這個(gè)數(shù)據(jù)框居中，搞了兩天終于總算達(dá)到Boss滿意的程度，做了半年C/S，反過來做B/S，頓時(shí)感到技術(shù)還是需要不斷使用，不然就是個(gè)廢，先來一步一步的分析：
點(diǎn)擊有背景層，然后有數(shù)據(jù)框：
1.背景層和數(shù)據(jù)框都是兩個(gè)已經(jīng)在頁(yè)面中存在的Div,響應(yīng)點(diǎn)擊事件獲取參數(shù)就可以
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">背景層測(cè)試</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;">個(gè)人簡(jiǎn)介</td></tr> 37 <tr><td id="name">小飛象</td><td id="resume">才畢業(yè)的菜鳥級(jí)別的人，總是犯一些未知活已知的錯(cuò)誤，需要給出自己的判斷力，加強(qiáng)自己的執(zhí)行力，你需要不斷的去把控自己，給出所有的問題一個(gè)正確的解決方式 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"稍微說下(如果你是前端已經(jīng)很強(qiáng)可以忽略我)，background控制背景顏色，opacity設(shè)置透明度，兩個(gè)算是哥倆一塊用，top，left設(shè)為0背景是整個(gè)頁(yè)面，;position:absolute設(shè)為絕對(duì)，設(shè)為z-index的數(shù)值是疊加時(shí)候的順序，小的在下面~
數(shù)據(jù)框樣式style="background:white;z-index:5;display:none;width:400px;position:absolute;"其中z-index比背景層的數(shù)值大就行.
2.上面的代碼數(shù)據(jù)框是居中的，沒有任何問題，現(xiàn)在需要異步加載一下數(shù)據(jù)，填充數(shù)據(jù)后臺(tái)返回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">背景層測(cè)試</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;">個(gè)人簡(jiǎn)介</td></tr> 42 <tr><td id="name">小飛象</td><td id="resume">才畢業(yè)的菜鳥級(jí)別的人，總是犯一些未知活已知的錯(cuò)誤，需要給出自己的判斷力，加強(qiáng)自己的執(zhí)行力，你需要不斷的去把控自己，給出所有的問題一個(gè)正確的解決方式 43 </td></tr> 44 </table> 45 </div> 46 47 </body> 48 </html>?
死就死在這個(gè)上面，這個(gè)頁(yè)面出現(xiàn)的數(shù)據(jù)框是無法居中的，一直搞了很久，各位有看出問題的直接可以閃人，沒看出來可以自己思考下，沒想出來直接看第三段~
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">背景層測(cè)試</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;">個(gè)人簡(jiǎn)介</td></tr> 43 <tr><td id="name">小飛象</td><td id="resume">才畢業(yè)的菜鳥級(jí)別的人，總是犯一些未知活已知的錯(cuò)誤，需要給出自己的判斷力，加強(qiáng)自己的執(zhí)行力，你需要不斷的去把控自己，給出所有的問題一個(gè)正確的解決方式 44 </td></tr> 45 </table> 46 </div> 47 48 </body> 49 </html> View CodeAjax是異步，就是Ajax程序執(zhí)行的同時(shí)，Ajax程序之后的代碼也在同時(shí)執(zhí)行，雖然嘴上天天說著異步，只有真正用到的時(shí)候才感到異步的真不是說著玩的，想起一句老話，紙上得來終覺淺，絕知此事要躬行~
最后小插曲：
1 string name = "小飛象"; 2 string resume = "才畢業(yè)的菜鳥級(jí)別的人，總是犯一些未知活已知的錯(cuò)誤，需要給出自己的判斷力，加強(qiáng)自己的執(zhí)行力，你需要不斷的去把控自己，給出所有的問題一個(gè)正確的解決方式"; 3 StringBuilder sb = new StringBuilder(); 4 sb.AppendFormat("{ \"name\":\"{0}\",\"resume\":\"{1}\"}", name, resume); 5 Console.WriteLine(sb.ToString()); 6 Console.ReadKey();在將字符串轉(zhuǎn)成JSON格式遇到的一個(gè)問題，開始沒看明白，知道這段代碼錯(cuò)誤的也可以跳過了，不知道的可以測(cè)試一下，寫博客還是有好處的，第一篇技術(shù)博客，希望對(duì)需要的人有幫助，祝大家編程愉快~
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?By
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Samll ?Fly ? Elephant
總結(jié)
以上是生活随笔為你收集整理的遮罩层中的相对定位与绝对定位(Ajax)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse - CDT使用GDB调试
- 下一篇： yum源yum-fastestmirro