1.前言html
如今項目中用到彈出框的話大部分都是直接用控件的。不過有控件雖方便,但有時候會有衝突的地方。我上次用layui的彈出框控件,而後也用到了百度的編輯器uEditor,而後一切都好好的,結果編輯賦值不成功。我也不知道什麼問題。若是有知道緣由的大神,求賜教!編輯器
因此說一旦有不兼容的彈出框,就本身畫了。畫多了,就習慣了。今天就分享一個方法【可是這個方法的原理我居然琢磨不透!】ui
2.詳情spa
代碼是這樣的,一個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>
而後效果圖是這樣的code
而後這樣的話它就居中了。我一直不明白的就是,我並無設置position:relative,那麼這樣的話div就應該相對於body進行絕對定位了。我這個代碼中的第一個div.point確實是相對於body進行絕對定位了。那麼我這第二個div的父級並無設置positon:relative。那麼它應該是否是也應該相對於body絕對定位呢。可是事實並非這樣子呢,它是相對於div.point進行了絕對定位。【雖然效果實現了,可是原理並非特別懂,求大神賜教】xml
我一直就是用這種方法作的彈出框。不過,實際應用中,最外層還得加一個div。而後這個div設置成100%寬高度,posiotn:fixed;left:0;top:0;這樣的話彈出框居中了,鼠標也滾動不了。效果較真實一點;htm
<!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>
實現效果以下:blog
這樣的話,一個居中的彈出框就實現了,在頁面的正中間。不過代碼實現了,原理不是特別懂,還但願各位對我進行指點一二,讓我能真正明白這個理!謝了。utf-8
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>