遮罩层中的相对定位与绝对定位(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 CodeAjax是異步，就是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
總結
以上是生活随笔為你收集整理的遮罩层中的相对定位与绝对定位(Ajax)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Eclipse - CDT使用GDB调试
- 下一篇： yum源yum-fastestmirro