1.前言
現在項目中用到彈出框的話大部分都是直接用控件的。不過有控件雖方便，但有時候會有沖突的地方。我上次用layui的彈出框控件，然后也用到了百度的編輯器uEditor，然后一切都好好的，結果編輯賦值不成功。我也不知道什么問題。如果有知道原因的大神，求賜教！
所以說一旦有不兼容的彈出框，就自己畫了。畫多了，就習慣了。今天就分享一個方法【但是這個方法的原理我竟然琢磨不透！】
2.詳情
代碼是這樣的，一個div.point無寬高度，left:50%;top：50%;這樣的話，就會在頁面的正中間，然后div.pop設置了500px的寬高，居左，居上各-250px的距離。然后這個div.pop就會在頁面居中了；
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .point{position:absolute;left:50%; top:50%;} .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; } </style> </head> <body> <div class="point"> <div class="pop"></div> </div> </body> </html>
然后效果圖是這樣的
然后這樣的話它就居中了。我一直不明白的就是，我並沒有設置position:relative，那么這樣的話div就應該相對於body進行絕對定位了。我這個代碼中的第一個div.point確實是相對於body進行絕對定位了。那么我這第二個div的父級並沒有設置positon:relative。那么它應該是不是也應該相對於body絕對定位呢。但是事實並不是這樣子呢，它是相對於div.point進行了絕對定位。【雖然效果實現了，但是原理並不是特別懂，求大神賜教】
我一直就是用這種方法做的彈出框。不過，實際應用中，最外層還得加一個div。然后這個div設置成100%寬高度，posiotn:fixed;left:0;top:0;這樣的話彈出框居中了，鼠標也滾動不了。效果較真實一點；
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .point{position:absolute;left:50%; top:50%;} .pop{width:500px; height:500px; position:absolute;left:-250px; top:-250px; border:2px solid red; } </style> </head> <body> <div style="width:100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.3)"> <div class="point"> <div class="pop"></div> </div> </div> </body> </html>
實現效果如下：
這樣的話，一個居中的彈出框就實現了，在頁面的正中間。不過代碼實現了，原理不是特別懂，還希望各位對我進行指點一二，讓我能真正明白這個理！謝了。
3.總結
希望這種寫法能夠幫助到需要的小童鞋。也希望我文中的不足不要影響到大家，如果有錯誤的地方，請大家告之。
4.追加
根據大神程序猿到攻城獅之旅 的指點。我大概領會了。我上面的代碼要做一下修改.修改后如下。其實我根本不需要第一個div.point。這個div設計top:50%;left:50%后，它的左上角那個點其實就已經在頁面中間了，這個時候，我只要向左向右移動想要的負像素，就可以讓div往中間靠近了。這樣的話，更容易理解，而且更簡單。當然了，外層再加個div作為遮罩層還是很有必要的。
<body> <div style="position:absolute; top:50%;left:50%; width:500px; height:500px; margin-top:-250px; margin-left:-250px; border:2px solid red"></div> </body>