彈出層在網頁開發中經常用到,以前都是百度一下複製粘貼,從來沒有仔細看過也沒有理解原理. 直到有一天沒有網路,,,然後突然就想到了.這麼簡單為什麼會複製粘貼這麼久.總結如下: 1、有個大的div背景設個透明度opacity:0.5;filter:alpha(opacity=57),來個absolute ...
彈出層在網頁開發中經常用到,以前都是百度一下複製粘貼,從來沒有仔細看過也沒有理解原理.
直到有一天沒有網路,,,然後突然就想到了.這麼簡單為什麼會複製粘貼這麼久.總結如下:
1、有個大的div背景設個透明度opacity:0.5;filter:alpha(opacity=57),來個absolute或者fixed定位,最寬最高,z-index比覆蓋的頁面內容大。
2、做一個內容div也來個絕對定位,z-index更大一點設置一下喜歡的屬性耀眼的box-shadow等等
3、設置一個層把他倆包起來方便移除添加,點擊按鈕的時候就把獲取一下然後append到body,不需要就remove掉。如下所示:
<div id="modal">
<div class="layer">
</div>
<div class="content">
</div>
<div>
4、既然是彈出層就得要拖拽了,其實我用啥網站基本都沒拖拽過。第一次看到這個就會想到的是按下的時候記錄坐標,然後再拖動的時候實時計算然後設置彈窗的位置即可。有一點要註意就是火狐event事件問題var et =window.event || arguments.callee.caller.arguments[0];
效果如下: