彈出層效果網上很多很多，也沒啥好說的了。寫這個只是作為學習jq的一些記錄。此外掛程式的一些方法參考了花匠的
dialog
；在此表示感謝。
接著說說這種彈出層的原理或者說是做法。總結下經驗；首先需要乙個遮罩層來實現灰色背景。我們可以建立乙個z-index高於其他層的div。然後設為絕對定位。接著獲取頁面的高度並把它作為這個div的高度。這樣背景層的問題就ok了；
背景層結構：
<
divid="
windownbg
"style="
height:
"+$(
document
).height
()+"
px;filter:alpha(opacity=0);opacity:0;z-index: 999901
">
div>
然後是彈出層的結構：
<
divid="
windown-box
">
<
divid="
windown-title
">
<
h2>
h2>
<
spanid=
"windown-close
">
關閉span
>
div>
<
divid="
windown-content-border
">
<
divid="
windown-content
">
div>
div>
div>
if(_version
== 6.0));
}else );};
定位問題解決了就好辦了。剩下的就是獲取內容和一些附加效果了。內容這裡可以設定的型別有5種。分別是：text、id、img、url、iframe 這個就不說了。附加效果就拖拽和自動關閉。拖拽這個東西有點複雜。但了解原理後也就不複雜了。首先是獲取對像的offsetleft和offsettop這兩個值。這兩個值是對像距離瀏覽器視窗左邊和上邊的距離。然後繫結滑鼠事件，當按下的時候計算滑鼠當前的座標clientx、clienty。並計算這兩個引數的差值得到新的座標movex、movey。當滑鼠拖動的時候。計算當前滑鼠的座標與之前得到的movex、movey之間的差值。這個值就是對像的新的座標了。把它符值給對像的top、left就實現了拖拽。
draghead
.onmousedown
= function(e
)elsee=
window
.event
?window
.event:e
;var
ol=
drag_id
.offsetleft
, ot
= drag_id
.offsettop
-movetop
;movex= e
.clientx-ol
;movey= e
.clienty-ot
;document
.onmousemove
= function(e
)}}}
自動關閉就很簡單了。就是乙個settimeout
自動關閉**：
jquery實現的乙個 彈出層頁面永遠居中
永遠居中的彈出層，改變視窗大小或拖動視窗滾動條時也會居中 ie 7,8,9 firefox 上測試通過。ie6上改變視窗大小時不能同步調整 目前尚不支援拖動功能 附件 jquery.popdiv.rar 是個寫好的 jquery外掛程式 此外掛程式的優點是彈出層的樣式完全由使用者自己指定。說明 po...
Jquery彈出層外掛程式
size medium 此外掛程式可支援以下功能 1 觸發響應事件 2 設定彈出層的標題 3 設定彈出層型別 text 容器id url iframe 4 彈出層的內容獲取 text文字 容器id名稱 url位址 iframe的位址 5 彈出層的寬度 6 彈出層的高度 7 層滑動的高度也就是彈出層時...
利用React anu編寫乙個彈出層
本文將一步步介紹如何使用react或anu建立 乙個彈出層。react時代，都是要經過編譯的，我們很多時間都耗在babel與webpack上。因此本文也介紹如何玩webpack與babel。我們建立乙個ui目錄，裡面新增乙個package.json。內容如下，裡面已經是儘量減少babel外掛程式的使...